forked from opentiny/tiny-vue
docs(sites): [drop-times,time-select] optimize docs and demos (#1151)
This commit is contained in:
李天佑
GitHub
parent
e9c801f766
commit
e01d41a348
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<div class="drop-time-demo-basic">
|
||||
<tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
|
||||
<p>当前选中值：{{ value }}</p>
|
||||
</div>
|
||||
|
|
@ -15,3 +15,9 @@ function change(value) {
|
|||
Modal.message({ message: 'change 事件，当前值为 ' + value })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drop-time-demo-basic {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<div class="drop-time-demo-basic">
|
||||
<tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
|
||||
<p>当前选中值：{{ value }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DropTimes, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -24,3 +24,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drop-time-demo-basic {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,23 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
|
||||
<p>当前选中值：{{ value }}</p>
|
||||
<div class="drop-time-demo-size">
|
||||
<tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
|
||||
<tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
|
||||
<tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DropTimes as TinyDropTimes } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.drop-time-demo-size {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
|
||||
<p>当前选中值：{{ value }}</p>
|
||||
<div class="drop-time-demo-size">
|
||||
<tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
|
||||
<tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
|
||||
<tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DropTimes } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -19,3 +20,12 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.drop-time-demo-size {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-drop-times
|
||||
v-model="value"
|
||||
placeholder="请选择"
|
||||
:end="720"
|
||||
:start="60"
|
||||
:step="5"
|
||||
@change="change"
|
||||
></tiny-drop-times>
|
||||
<div class="drop-time-demo-sse">
|
||||
<tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DropTimes as TinyDropTimes, Modal } from '@opentiny/vue'
|
||||
import { DropTimes as TinyDropTimes } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
|
||||
function change(value) {
|
||||
Modal.message({ message: 'change 事件，当前值为 ' + value })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drop-time-demo-sse {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-drop-times
|
||||
v-model="value"
|
||||
placeholder="请选择"
|
||||
:end="720"
|
||||
:start="60"
|
||||
:step="5"
|
||||
@change="change"
|
||||
></tiny-drop-times>
|
||||
<div class="drop-time-demo-sse">
|
||||
<tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DropTimes, Modal } from '@opentiny/vue'
|
||||
<script>
|
||||
import { DropTimes } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -22,11 +15,12 @@ export default {
|
|||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(value) {
|
||||
Modal.message({ message: 'change 事件，当前值为 ' + value })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drop-time-demo-sse {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '设置组件大小的size属性', 'en-US': 'Set the size attribute of the component size' },
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Set the size attribute of the component size' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可设置为：medium，small，mini</p>\n',
|
||||
'en-US': '<p>The value can be medium, small, or mini</p>\n'
|
||||
|
|
@ -36,17 +36,17 @@ export default {
|
|||
'props': [
|
||||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': '—',
|
||||
'defaultValue': '该属性的默认值为 {}',
|
||||
'type': 'string',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '绑定值', 'en-US': 'Set the component size. The value can be medium, small, or mini.' },
|
||||
'demoId': 'start-end-step'
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置组件大小，可以设置为：medium，small，mini',
|
||||
'zh-CN': '输入框尺寸',
|
||||
'en-US': 'Class name added to the DropTimes drop-down list box'
|
||||
},
|
||||
'demoId': 'size'
|
||||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
{
|
||||
'name': 'popper-class',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '为 DropTimes 下拉弹框添加的 class 类名',
|
||||
'en-US':
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'defaultValue': ' true',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
|
||||
|
|
@ -81,14 +81,14 @@ export default {
|
|||
'zh-CN': '设置输入框内的提示占位文本',
|
||||
'en-US': 'Set the prompt placeholder text in the text box.'
|
||||
},
|
||||
'demoId': 'start-end-step'
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'end',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 1440',
|
||||
'defaultValue': ' 1440',
|
||||
'desc': {
|
||||
'zh-CN': '结束时间，以分钟计算，默认值为 1440。',
|
||||
'zh-CN': '结束时间，以分钟计算',
|
||||
'en-US': 'End time, in minutes. The default value is 1440.'
|
||||
},
|
||||
'demoId': 'start-end-step'
|
||||
|
|
@ -96,9 +96,9 @@ export default {
|
|||
{
|
||||
'name': 'start',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'defaultValue': ' 0',
|
||||
'desc': {
|
||||
'zh-CN': '开始时间，以分钟计算，默认值为 0。',
|
||||
'zh-CN': '开始时间，以分钟计算',
|
||||
'en-US': 'Start time, in minutes. The default value is 0.'
|
||||
},
|
||||
'demoId': 'start-end-step'
|
||||
|
|
@ -106,24 +106,34 @@ export default {
|
|||
{
|
||||
'name': 'step',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 15',
|
||||
'defaultValue': ' 15',
|
||||
'desc': {
|
||||
'zh-CN': '间隔时间，以分钟计算，默认值为 15。',
|
||||
'zh-CN': '间隔时间，以分钟计算',
|
||||
'en-US': 'Interval, in minutes. The default value is 15.'
|
||||
},
|
||||
'demoId': 'start-end-step'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': ' false',
|
||||
'desc': {
|
||||
'zh-CN': '禁用状态',
|
||||
'en-US': 'Disabled state'
|
||||
},
|
||||
'demoId': ''
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'change',
|
||||
'type': '',
|
||||
'type': '(value: string) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '下拉切换当前时间后触发该事件',
|
||||
'en-US': 'This event is triggered after the current time is switched by the pull-down button.'
|
||||
},
|
||||
'demoId': 'start-end-step'
|
||||
'demoId': 'basic-usage'
|
||||
}
|
||||
],
|
||||
'slots': []
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
|
||||
<div class="time-select-demo-basic">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-basic {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
|
||||
<div class="time-select-demo-basic">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -16,3 +18,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-basic {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
popper-class="myselect"
|
||||
placeholder="选择时间"
|
||||
:clear-icon="IconYes"
|
||||
clearable
|
||||
name="name"
|
||||
></tiny-time-select>
|
||||
<div class="time-select-demo-icon">
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
popper-class="myselect"
|
||||
placeholder="选择时间"
|
||||
:clear-icon="IconYes"
|
||||
clearable
|
||||
name="name"
|
||||
></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
import { iconYes } from '@opentiny/vue-icon'
|
||||
|
|
@ -17,3 +19,9 @@ import { iconYes } from '@opentiny/vue-icon'
|
|||
const IconYes = iconYes()
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-icon {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
popper-class="myselect"
|
||||
placeholder="选择时间"
|
||||
:clear-icon="IconYes"
|
||||
clearable
|
||||
name="name"
|
||||
></tiny-time-select>
|
||||
<div class="time-select-demo-icon">
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
popper-class="myselect"
|
||||
placeholder="选择时间"
|
||||
:clear-icon="IconYes"
|
||||
clearable
|
||||
name="name"
|
||||
></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
import { IconYes } from '@opentiny/vue-icon'
|
||||
|
||||
|
|
@ -25,3 +27,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-icon {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :default-time="defaultTime"></tiny-time-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const defaultTime = ref('10:00')
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :default-time="defaultTime"></tiny-time-select>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeSelect: TimeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
defaultTime: '10:00'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
|
||||
<div class="time-select-demo-default">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const defaultValue = ref('10:00')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-default {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
|
||||
<div class="time-select-demo-default">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -17,3 +19,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-default {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
|
||||
<div class="time-select-demo-disabled">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-disabled {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
|
||||
<div class="time-select-demo-disabled">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -16,3 +18,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-disabled {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
|
||||
<div class="time-select-demo-editable">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-editable {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
|
||||
<div class="time-select-demo-editable">
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -16,3 +18,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-editable {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="time-select-demo-event">
|
||||
<tiny-time-select
|
||||
v-model="value1"
|
||||
@blur="bulr"
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -28,3 +28,9 @@ function focus() {
|
|||
Modal.message('focus事件')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-event {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="time-select-demo-event">
|
||||
<tiny-time-select
|
||||
v-model="value1"
|
||||
@blur="bulr"
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -26,8 +26,8 @@ export default {
|
|||
bulr() {
|
||||
Modal.message('blur事件')
|
||||
},
|
||||
change() {
|
||||
Modal.message('change事件')
|
||||
change(value) {
|
||||
Modal.message(value)
|
||||
},
|
||||
focus() {
|
||||
Modal.message('focus事件')
|
||||
|
|
@ -35,3 +35,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-event {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-select v-model="value1" @change="change" placeholder="选择时间"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref('08:30')
|
||||
|
||||
function change() {
|
||||
Modal.message('change事件')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-select v-model="value1" @change="change" placeholder="选择时间"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimeSelect, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeSelect: TimeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: '08:30'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
Modal.message('change事件')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="time-select-demo-focus">
|
||||
<tiny-button @click="hanleFocus">手动获取焦点</tiny-button>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" ref="timeSelectRef"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -13,6 +13,15 @@ const value = ref('')
|
|||
const timeSelectRef = ref()
|
||||
|
||||
function hanleFocus() {
|
||||
timeSelectRef.value.focus()
|
||||
timeSelectRef.value.handleFocus()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.time-select-demo-focus {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="time-select-demo-focus">
|
||||
<tiny-button @click="hanleFocus">手动获取焦点</tiny-button>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" ref="timeSelect"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -20,8 +20,17 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
hanleFocus() {
|
||||
this.$refs.timeSelect.focus()
|
||||
this.$refs.timeSelect.handleFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.time-select-demo-focus {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,28 @@
|
|||
<template>
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: '09:00',
|
||||
maxTime: '12:30'
|
||||
}"
|
||||
placeholder="选择时间"
|
||||
></tiny-time-select>
|
||||
<div class="time-select-demo-picker">
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: '09:00',
|
||||
maxTime: '12:30'
|
||||
}"
|
||||
placeholder="选择时间"
|
||||
></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('09:30')
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-picker {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<template>
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: '09:00',
|
||||
maxTime: '12:30'
|
||||
}"
|
||||
placeholder="选择时间"
|
||||
></tiny-time-select>
|
||||
<div class="time-select-demo-picker">
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: '09:00',
|
||||
maxTime: '12:30'
|
||||
}"
|
||||
placeholder="选择时间"
|
||||
></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -21,8 +23,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: '09:30'
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-picker {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<div class="time-select-demo">
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
placeholder="选择时间"
|
||||
popper-class="myClass"
|
||||
:popper-append-to-body="false"
|
||||
></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.time-select-demo {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.myClass {
|
||||
background: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义类名', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('time-select#popper-class')
|
||||
await page.getByPlaceholder('选择时间').click()
|
||||
const myClass = page.locator('.tiny-input-group__panel div').first()
|
||||
await expect(myClass).toHaveClass(/myClass/)
|
||||
})
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<div class="time-select-demo">
|
||||
<tiny-time-select
|
||||
v-model="value"
|
||||
placeholder="选择时间"
|
||||
popper-class="myClass"
|
||||
:popper-append-to-body="false"
|
||||
></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeSelect: TimeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.time-select-demo {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.myClass {
|
||||
background: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="time-select-demo-range">
|
||||
<tiny-time-select
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
maxTime: endTime
|
||||
}"
|
||||
></tiny-time-select>
|
||||
<tiny-time-select
|
||||
placeholder="结束时间"
|
||||
|
|
@ -18,10 +23,19 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const startTime = ref('')
|
||||
const endTime = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.time-select-demo-range {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="time-select-demo-range">
|
||||
<tiny-time-select
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
maxTime: endTime
|
||||
}"
|
||||
></tiny-time-select>
|
||||
<tiny-time-select
|
||||
placeholder="结束时间"
|
||||
|
|
@ -18,7 +23,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -33,3 +38,12 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.time-select-demo-range {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,23 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
|
||||
<div class="time-select-demo-size">
|
||||
<tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
|
||||
<tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
|
||||
<tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.time-select-demo-size {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
|
||||
<div class="time-select-demo-size">
|
||||
<tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
|
||||
<tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
|
||||
<tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -16,3 +20,12 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.time-select-demo-size {
|
||||
width: 270px;
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" size="mini"></tiny-time-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('mini 尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('time-select#size-mini')
|
||||
const miniBox = page.getByPlaceholder('选择时间')
|
||||
await expect(miniBox).toHaveCSS('height', '24px')
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" size="mini"></tiny-time-select>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeSelect: TimeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" size="small"></tiny-time-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('small 尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('time-select#size-small')
|
||||
const smallBox = page.getByPlaceholder('选择时间')
|
||||
await expect(smallBox).toHaveCSS('height', '32px')
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-time-select v-model="value" placeholder="选择时间" size="small"></tiny-time-select>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeSelect: TimeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="time-select-demo-suffix">
|
||||
<tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
|
||||
import { iconYes } from '@opentiny/vue-icon'
|
||||
|
|
@ -12,3 +12,9 @@ import { iconYes } from '@opentiny/vue-icon'
|
|||
const IconYes = iconYes()
|
||||
const value = ref('08:30')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-suffix {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="time-select-demo-suffix">
|
||||
<tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></tiny-time-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimeSelect } from '@opentiny/vue'
|
||||
import { IconYes } from '@opentiny/vue-icon'
|
||||
|
||||
|
|
@ -20,3 +20,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-select-demo-suffix {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,28 +5,35 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例。', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'range-placeholder',
|
||||
'name': { 'zh-CN': '固定时间范围', 'en-US': 'Fixed Time Range' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['range-placeholder.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'default-value',
|
||||
'name': { 'zh-CN': '选择器打开时默认时间设置', 'en-US': 'Default time setting when the selector is enabled' },
|
||||
'name': { 'zh-CN': '设置打开默认时间', 'en-US': 'Default time setting when the selector is enabled' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间</p>\n',
|
||||
'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间。</p>\n',
|
||||
'en-US': '<p>Use <code>default-value</code> to set the selector to open the default display time</p>\n'
|
||||
},
|
||||
'codeFiles': ['default-value.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'picker-options',
|
||||
'name': { 'zh-CN': '指定时间点', 'en-US': 'Specified time point' },
|
||||
'desc': { 'zh-CN': '<p>picker-options 设置时间点</p>\n', 'en-US': '<p>picker-options Set Time</p>\n' },
|
||||
'name': { 'zh-CN': '固定时间点', 'en-US': 'Specified time point' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>提供固定时间点，可通过 picker-options 对象中的 start、end、step、minTime、maxTime 设置起始时间、结束时间、步长、最小有效时间和最大有效时间。</p>\n',
|
||||
'en-US': '<p>picker-options Set Time</p>\n'
|
||||
},
|
||||
'codeFiles': ['picker-options.vue']
|
||||
},
|
||||
{
|
||||
|
|
@ -42,30 +49,20 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'clear-icon',
|
||||
'name': { 'zh-CN': '自定义清空图标', 'en-US': 'Customized Clear Icon' },
|
||||
'name': { 'zh-CN': '清空图标', 'en-US': 'Customized Clear Icon' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>clear-icon</code> 自定义清空图标</p>\n',
|
||||
'zh-CN':
|
||||
'<p>通过 <code>clearable</code> 显示清空图标，通过 <code>clear-icon</code> 自定义清空图标，通过 <code>popper-class</code> 自定义原生属性。</p>',
|
||||
'en-US': '<p>Clear the icon by <code>clear-icon</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['clear-icon.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'clearable',
|
||||
'name': { 'zh-CN': '显示清除按钮', 'en-US': 'Display the Clear button' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['clear-icon.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'name',
|
||||
'name': { 'zh-CN': '原生属性', 'en-US': 'Native Attribute' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['clear-icon.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'event-blur',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p><code>focus</code> input 框聚焦时触发，<code>blur</code> input 框失焦时触发</p>\n',
|
||||
'zh-CN':
|
||||
'<p><code>focus</code> input 框聚焦时触发，<code>blur</code> input 框失焦时触发，<code>change</code> input 绑定值改变时触发。</p>\n',
|
||||
'en-US':
|
||||
'Triggered when the <p><code>focus</code> input frame is focused and when the input frame is out of focus</p>\n'
|
||||
},
|
||||
|
|
@ -81,40 +78,22 @@ export default {
|
|||
},
|
||||
'codeFiles': ['editable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'disabled',
|
||||
'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['disabled.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'popper-class',
|
||||
'name': { 'zh-CN': '自定义类名', 'en-US': 'Customized class name' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['popper-class.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-mini',
|
||||
'name': { 'zh-CN': 'mini 尺寸', 'en-US': 'mini size' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['size-mini.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-small',
|
||||
'name': { 'zh-CN': 'small 尺寸', 'en-US': 'small size' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['size-small.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-medium',
|
||||
'name': { 'zh-CN': 'medium 尺寸', 'en-US': 'medium Size' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'medium Size' },
|
||||
'desc': {
|
||||
'zh-CN': '通过修改 size 的属性值可调整输入框尺寸，提供 medium、small、mini三个固定属性值。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['size-medium.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'focus',
|
||||
'name': { 'zh-CN': '手动获取焦点', 'en-US': 'Manually obtaining the focus' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过给组件设置 ref 手动调用触发 focus 事件。',
|
||||
'en-US': 'For details, see the following example.'
|
||||
},
|
||||
'codeFiles': ['focus.vue']
|
||||
}
|
||||
],
|
||||
|
|
@ -126,9 +105,9 @@ export default {
|
|||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'date(DatePicker) / array(DateRangePicker)',
|
||||
'defaultValue': '日期选择器选中的日期值，可设置选择器的初始值',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '绑定值',
|
||||
'zh-CN': '日期选择器选中的日期值，可设置选择器的初始值',
|
||||
'en-US': 'Date value selected by the date selector. You can set the initial value of the selector.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
|
|
@ -136,55 +115,55 @@ export default {
|
|||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
|
||||
'demoId': 'disabled'
|
||||
'defaultValue': ' false',
|
||||
'desc': { 'zh-CN': '时间选择器是否禁用', 'en-US': 'Disabled' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'editable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '文本框可输入', 'en-US': 'The text box can be entered.' },
|
||||
'demoId': 'basic-usage'
|
||||
'defaultValue': ' true',
|
||||
'desc': { 'zh-CN': '文本框是否可手动输入', 'en-US': 'The text box can be entered.' },
|
||||
'demoId': 'editable'
|
||||
},
|
||||
{
|
||||
'name': 'clearable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '是否显示清除按钮', 'en-US': 'Display Clear Button' },
|
||||
'defaultValue': ' true',
|
||||
'desc': { 'zh-CN': '清除按钮是否显示', 'en-US': 'Display Clear Button' },
|
||||
'demoId': 'clear-icon'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
|
||||
'zh-CN': '输入框尺寸;该属性的可选值为 medium、small、mini',
|
||||
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
|
||||
},
|
||||
'demoId': 'size-mini'
|
||||
'demoId': 'size-medium'
|
||||
},
|
||||
{
|
||||
'name': 'placeholder',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为空',
|
||||
'desc': { 'zh-CN': '非范围选择时的占位内容', 'en-US': 'Placeholder content for non-range selection' },
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '输入框的提示占位内容', 'en-US': 'Placeholder content for non-range selection' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'popper-class',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': 'TimePicker 下拉框的 class 类名',
|
||||
'en-US': 'Class name of the TimePicker drop-down list box'
|
||||
},
|
||||
'demoId': 'popper-class'
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'picker-options',
|
||||
'type': 'object',
|
||||
'defaultValue': '该属性的默认值为 {}',
|
||||
'defaultValue': '{}',
|
||||
'desc': {
|
||||
'zh-CN': '当前时间日期选择器特有的选项参考下表',
|
||||
'en-US': 'The following table lists the options of the current time and date selector.'
|
||||
|
|
@ -194,7 +173,7 @@ export default {
|
|||
{
|
||||
'name': 'default-value',
|
||||
'type': 'Date',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
|
||||
'en-US':
|
||||
|
|
@ -205,28 +184,28 @@ export default {
|
|||
{
|
||||
'name': 'name',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
|
||||
'demoId': 'name'
|
||||
'demoId': 'clear-icon'
|
||||
},
|
||||
{
|
||||
'name': 'suffix-icon',
|
||||
'type': 'string',
|
||||
'defaultValue': '该自定后置图标，该属性的默认值为 IconCalendar',
|
||||
'defaultValue': 'IconCalendar',
|
||||
'desc': { 'zh-CN': '自定义头部图标', 'en-US': 'Custom header icon' },
|
||||
'demoId': 'suffix-icon'
|
||||
},
|
||||
{
|
||||
'name': 'clear-icon',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 IconOperationfaild',
|
||||
'defaultValue': 'IconOperationfaild',
|
||||
'desc': { 'zh-CN': '自定义清空图标', 'en-US': 'Customized clear icon' },
|
||||
'demoId': 'clear-icon'
|
||||
},
|
||||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false',
|
||||
'en-US':
|
||||
|
|
@ -238,17 +217,17 @@ export default {
|
|||
'events': [
|
||||
{
|
||||
'name': 'change',
|
||||
'type': '',
|
||||
'type': '(value: string) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '用户确认选定的值时触发',
|
||||
'zh-CN': '当 input 绑定的值发生改变时触发',
|
||||
'en-US': 'This event is triggered when the user confirms the selected value.'
|
||||
},
|
||||
'demoId': 'event-blur'
|
||||
},
|
||||
{
|
||||
'name': 'blur',
|
||||
'type': '',
|
||||
'type': '( ) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当 input 失去焦点时触发',
|
||||
|
|
@ -258,7 +237,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'focus',
|
||||
'type': '',
|
||||
'type': '( ) => void',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '当 input 获得焦点时触发', 'en-US': 'This event is triggered when the input is focused.' },
|
||||
'demoId': 'event-blur'
|
||||
|
|
@ -267,8 +246,8 @@ export default {
|
|||
'slots': [],
|
||||
'methods': [
|
||||
{
|
||||
'name': 'focus',
|
||||
'type': '',
|
||||
'name': 'handleFocus',
|
||||
'type': '( ) => void',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '使 input 获取焦点', 'en-US': 'Enable input to focus.' },
|
||||
'demoId': 'focus'
|
||||
|
|
|
|||
Loading…
Reference in New Issue