docs(time-picker): optimize time-picker api docs (#795)
This commit is contained in:
GitHub
parent
0b0e880658
commit
4de8df22bc
|
|
@ -553,7 +553,7 @@ export default {
|
|||
{
|
||||
'name': 'step',
|
||||
'type': 'IStep',
|
||||
'typeAnchorName': 'IStep',
|
||||
'typeAnchorName': 'time-picker#IStep',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置 type="datetime" 或者 type="datetimerange" 属性之后，可以通过 step 配置时间的步长，step 是一个对象，包含三个属性：hour、minute、second，分别用来配置时、分、秒的步长',
|
||||
|
|
@ -786,17 +786,6 @@ interface IPickerOptions {
|
|||
startDate: Date
|
||||
endDate: Date
|
||||
}[]
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IStep',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IStep {
|
||||
hour: number
|
||||
minute: number
|
||||
second: number
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
<template>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :default-value="value1"></tiny-time-picker>
|
||||
<div>
|
||||
<p>时间默认值</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :default-value="defaultValue"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>时间范围默认值</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="rangeValue" is-range :default-value="defaultRangeValue"></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,8 +16,11 @@
|
|||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2020, 2, 10, 18, 40))
|
||||
const defaultValue = ref('2020-02-10 18:40')
|
||||
const value = ref('')
|
||||
|
||||
const defaultRangeValue = ref(['2016-09-10 18:40', '2016-09-10 18:50'])
|
||||
const rangeValue = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :default-value="value1"></tiny-time-picker>
|
||||
<div>
|
||||
<p>时间默认值</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :default-value="defaultValue"></tiny-time-picker>
|
||||
</div>
|
||||
<p>时间范围默认值</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="rangeValue" is-range :default-value="defaultRangeValue"></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,8 +20,10 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2020, 2, 10, 18, 40),
|
||||
value: ''
|
||||
defaultValue: '2020-02-10 18:40',
|
||||
value: '',
|
||||
defaultRangeValue: ['2016-09-10 18:40', '2016-09-10 18:50'],
|
||||
rangeValue: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default {
|
|||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '默认是通过滚动的方式选择时间，<code>arrow-control</code> 属性可以设置通过箭头的方式选择时间。',
|
||||
'zh-CN': '<p>默认是通过滚动的方式选择时间，<code>arrow-control</code> 属性可以设置通过箭头的方式选择时间。</p>',
|
||||
'en-US': 'The default is to select the time by scrolling, and the <code> arrow-control </code> property can be set to select the time by the arrow.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
|
|
@ -15,9 +15,8 @@ export default {
|
|||
'demoId': 'is-range',
|
||||
'name': { 'zh-CN': '范围选择', 'en-US': 'Select time range' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 \'-\'。</p>\n',
|
||||
'en-US': '<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to\'-\'.</p>\n'
|
||||
'zh-CN': '<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 \'-\'。</p>',
|
||||
'en-US': '<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to\'-\'.</p>'
|
||||
},
|
||||
'codeFiles': ['is-range.vue']
|
||||
},
|
||||
|
|
@ -25,19 +24,17 @@ export default {
|
|||
'demoId': 'disabled',
|
||||
'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled status' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>\n',
|
||||
'en-US':
|
||||
'<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>\n'
|
||||
'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>',
|
||||
'en-US': '<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>'
|
||||
},
|
||||
'codeFiles': ['disabled.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'placeholder',
|
||||
'name': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
|
||||
'name': {'zh-CN': '占位符', 'en-US': 'Placeholder' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>\n'
|
||||
'zh-CN': '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>',
|
||||
'en-US': '<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>'
|
||||
},
|
||||
'codeFiles': ['placeholder.vue']
|
||||
},
|
||||
|
|
@ -45,8 +42,8 @@ export default {
|
|||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸。</p>\n',
|
||||
'en-US': '<p>Customize size by <code>size</code>.</p>\n'
|
||||
'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸。</p>',
|
||||
'en-US': '<p>Customize size by <code>size</code>.</p>'
|
||||
},
|
||||
'codeFiles': ['size.vue']
|
||||
},
|
||||
|
|
@ -54,9 +51,8 @@ export default {
|
|||
'demoId': 'step',
|
||||
'name': { 'zh-CN': '步长', 'en-US': 'Step' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>\n',
|
||||
'en-US': '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>\n'
|
||||
'zh-CN': '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>',
|
||||
'en-US': '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>'
|
||||
},
|
||||
'codeFiles': ['step.vue']
|
||||
},
|
||||
|
|
@ -64,9 +60,8 @@ export default {
|
|||
'demoId': 'clearable',
|
||||
'name': { 'zh-CN': '清除按钮', 'en-US': 'Customized clear icon' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>\n'
|
||||
'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>',
|
||||
'en-US': '<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>'
|
||||
},
|
||||
'codeFiles': ['clearable.vue']
|
||||
},
|
||||
|
|
@ -74,13 +69,11 @@ export default {
|
|||
'demoId': 'format',
|
||||
'name': { 'zh-CN': '时间格式化', 'en-US': 'Time format' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
`
|
||||
<p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型。</p>\n
|
||||
<p>通过 <code>hh</code> 属性可设置 12 小时制。 <code>HH</code> 属性为 24 小时制，须和 A 或 a 使用。 <code>h</code> 与 <code>H</code> 属性设置不补 0。\n通过 <code>mm</code> 属性可设置分钟显示格式，例如 01。 <code>m</code> 属性设置不补 0。\n通过 <code>ss</code> 属性可设置秒的显示格式，例如 01。 <code>s</code> 属性设置不补 0。\n通过 <code>a</code> 属性可设置显示时间为 am/pm <code>A</code>属性设置显示时间为 AM/PM。</p>\n
|
||||
`,
|
||||
'en-US':
|
||||
'<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>\n'
|
||||
'zh-CN': `
|
||||
<p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型。</p>
|
||||
<p>通过 <code>hh</code> 属性可设置 12 小时制。 <code>HH</code> 属性为 24 小时制，须和 A 或 a 使用。 <code>h</code> 与 <code>H</code> 属性设置不补 0。\n通过 <code>mm</code> 属性可设置分钟显示格式，例如 01。 <code>m</code> 属性设置不补 0。\n通过 <code>ss</code> 属性可设置秒的显示格式，例如 01。 <code>s</code> 属性设置不补 0。\n通过 <code>a</code> 属性可设置显示时间为 am/pm <code>A</code>属性设置显示时间为 AM/PM。</p>
|
||||
`,
|
||||
'en-US': '<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>'
|
||||
},
|
||||
'codeFiles': ['format.vue']
|
||||
},
|
||||
|
|
@ -88,8 +81,8 @@ export default {
|
|||
'demoId': 'default-value',
|
||||
'name': { 'zh-CN': '默认时间', 'en-US': 'Default value' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间。</p>\n',
|
||||
'en-US': '<p>Open and display the default time through the <code> default-value </code> setting selector.</p>\n'
|
||||
'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间。</p>',
|
||||
'en-US': '<p>Open and display the default time through the <code> default-value </code> setting selector.</p>'
|
||||
},
|
||||
'codeFiles': ['default-value.vue']
|
||||
},
|
||||
|
|
@ -97,8 +90,8 @@ export default {
|
|||
'demoId': 'name',
|
||||
'name': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>name</code> 属性设置默认 name。</p>\n',
|
||||
'en-US': '<p>Set the default name through the <code> name </code> property.</p>\n'
|
||||
'zh-CN': '<p>通过 <code>name</code> 属性设置默认 name。</p>',
|
||||
'en-US': '<p>Set the default name through the <code> name </code> property.</p>'
|
||||
},
|
||||
'codeFiles': ['name.vue']
|
||||
},
|
||||
|
|
@ -106,10 +99,8 @@ export default {
|
|||
'demoId': 'suffix-icon',
|
||||
'name': { 'zh-CN': '自定义后置图标', 'en-US': 'Customize suffix icon' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>\n',
|
||||
'en-US':
|
||||
'The <p><code>format</code> time format is displayed. \n<code>timestamp</code>JS timestamp is available only in value-format. The component binding value is of the number type</p>\n'
|
||||
'zh-CN': '<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>',
|
||||
'en-US': 'The <p><code>format</code> time format is displayed. \n<code>timestamp</code>JS timestamp is available only in value-format. The component binding value is of the number type</p>'
|
||||
},
|
||||
'codeFiles': ['suffix-icon.vue']
|
||||
},
|
||||
|
|
@ -117,9 +108,8 @@ export default {
|
|||
'demoId': 'popper-class',
|
||||
'name': { 'zh-CN': '下拉框的类名', 'en-US': 'Popper class' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>popper-class</code> 属性设置下拉框的类名。通过 <code>popper-append-to-body</code> 属性设置是否将下拉框放到 body 元素上，默认值为 true，下拉框挂在 body 元素上。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the class name of the drop-down box through the <code> popper-class </code> attribute, and set whether the drop-down box is placed on the body element through the <code> popper-append-to-body </code> attribute. The default value is true, and the drop-down box hangs on the body element.</p>\n'
|
||||
'zh-CN': '<p>通过 <code>popper-class</code> 属性设置下拉框的类名。通过 <code>popper-append-to-body</code> 属性设置是否将下拉框放到 body 元素上，默认值为 true，下拉框挂在 body 元素上。</p>',
|
||||
'en-US': '<p>Set the class name of the drop-down box through the <code> popper-class </code> attribute, and set whether the drop-down box is placed on the body element through the <code> popper-append-to-body </code> attribute. The default value is true, and the drop-down box hangs on the body element.</p>'
|
||||
},
|
||||
'codeFiles': ['popper-class.vue']
|
||||
},
|
||||
|
|
@ -127,8 +117,8 @@ export default {
|
|||
'demoId': 'editable',
|
||||
'name': { 'zh-CN': '文本框不可输入', 'en-US': 'Text box is not editable' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>日期输入框默认可以输入日期，设置 <code>editable</code> 为 false 后，将不能输入。</p>\n',
|
||||
'en-US': '<p>You can set <code>disabled</code> to true, you can disabled the time picker。</p>\n'
|
||||
'zh-CN': '<p>日期输入框默认可以输入日期，设置 <code>editable</code> 为 false 后，将不能输入。</p>',
|
||||
'en-US': '<p>You can set <code>disabled</code> to true, you can disabled the time picker。</p>'
|
||||
},
|
||||
'codeFiles': ['editable.vue']
|
||||
},
|
||||
|
|
@ -136,7 +126,7 @@ export default {
|
|||
'demoId': 'event',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>当聚焦和失焦时会触发 focus 和 blur 事件，当确定选值时会触发 change 事件。</p>\n',
|
||||
'zh-CN': '<p>当聚焦和失焦时会触发 focus 和 blur 事件，当确定选值时会触发 change 事件。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['event.vue']
|
||||
|
|
@ -150,7 +140,7 @@ export default {
|
|||
{
|
||||
'name': 'arrow-control',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '是否使用箭头进行时间选择',
|
||||
'en-US': 'Whether to use arrows for time selection'
|
||||
|
|
@ -160,27 +150,29 @@ export default {
|
|||
{
|
||||
'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': 'clearable'
|
||||
},
|
||||
{
|
||||
'name': 'clear-icon',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 IconOperationfaild',
|
||||
'type': 'object',
|
||||
'defaultValue': 'IconOperationfaild',
|
||||
'desc': {
|
||||
'zh-CN': '自定义清空图标',
|
||||
'en-US':
|
||||
'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
|
||||
'en-US': 'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
|
||||
},
|
||||
'demoId': 'clear-icon'
|
||||
},
|
||||
{
|
||||
'name': 'default-value',
|
||||
'type': 'Date',
|
||||
'type': 'Date | string | number | Array',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
|
||||
'zh-CN': '当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被 new Date() 解析的值',
|
||||
'en-US': 'Native attribute'
|
||||
},
|
||||
'demoId': 'default-value'
|
||||
|
|
@ -188,15 +180,21 @@ export default {
|
|||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'Disabled'
|
||||
},
|
||||
'demoId': 'disabled'
|
||||
},
|
||||
{
|
||||
'name': 'editable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '文本框可输入', 'en-US': 'The text box can be entered.' },
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '文本框可输入',
|
||||
'en-US': 'The text box can be entered.'
|
||||
},
|
||||
'demoId': 'editable'
|
||||
},
|
||||
{
|
||||
|
|
@ -212,18 +210,17 @@ export default {
|
|||
{
|
||||
'name': 'is-range',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '是否为时间范围选择，仅对<tiny-time-picker>有效',
|
||||
'en-US':
|
||||
'Indicates whether to use arrows to select time. This parameter is valid only for <tiny-time-picker>.'
|
||||
'zh-CN': '是否为时间范围选择',
|
||||
'en-US': 'Indicates whether to use arrows to select time. This parameter is valid only for <tiny-time-picker>.'
|
||||
},
|
||||
'demoId': 'is-range'
|
||||
},
|
||||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'date(DatePicker) / array(DateRangePicker)',
|
||||
'defaultValue': '',
|
||||
'type': 'Date | string | number | Array',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '日期选择器选中的日期值，可设置选择器的初始值',
|
||||
'en-US': 'Date value selected by the date selector. You can set the initial value of the selector.'
|
||||
|
|
@ -233,30 +230,40 @@ export default {
|
|||
{
|
||||
'name': 'name',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '原生 input <code>name</code> 属性', 'en-US': 'Native input <code>name</code> attribute' },
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '原生 input <code>name</code> 属性',
|
||||
'en-US': 'Native input <code>name</code> attribute'
|
||||
},
|
||||
'demoId': 'name'
|
||||
},
|
||||
{
|
||||
'name': 'picker-options',
|
||||
'type': 'object',
|
||||
'defaultValue': '该属性的默认值为 {}',
|
||||
'desc': { 'zh-CN': '当前时间日期选择器特有的选项参考下表', 'en-US': 'Separator for selecting a range' },
|
||||
'demoId': 'basic-usage1'
|
||||
'type': 'IPickerOptions',
|
||||
'typeAnchorName': 'IPickerOptions',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '配置可选的时间范围、下拉框中显示的格式，包含 selectableRange / format 属性，详细用法可参考 IPickerOptions 类型声明',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'disabled'
|
||||
},
|
||||
{
|
||||
'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': 'placeholder'
|
||||
},
|
||||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false',
|
||||
'zh-CN': '是否将弹出框插入至 body 元素，在弹出框的定位出现问题时，可将该属性设置为 false',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'popper-class'
|
||||
|
|
@ -264,7 +271,7 @@ export default {
|
|||
{
|
||||
'name': 'popper-class',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': 'TimePicker 下拉框的 class 类名',
|
||||
'en-US': 'The following table lists the options of the current time and date selector.'
|
||||
|
|
@ -274,20 +281,19 @@ export default {
|
|||
{
|
||||
'name': 'range-separator',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 - ',
|
||||
'defaultValue': '\'-\'',
|
||||
'desc': {
|
||||
'zh-CN': '选择范围时的分隔符',
|
||||
'en-US':
|
||||
'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
|
||||
'en-US': 'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
|
||||
},
|
||||
'demoId': 'is-range'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'type': '\'medium\' | \'small\' | \'\' | \'mini\'',
|
||||
'defaultValue': '\'\'',
|
||||
'desc': {
|
||||
'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
|
||||
'zh-CN': '输入框尺寸',
|
||||
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
|
||||
},
|
||||
'demoId': 'size'
|
||||
|
|
@ -295,7 +301,7 @@ export default {
|
|||
{
|
||||
'name': 'start-placeholder',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': '\'\'',
|
||||
'desc': {
|
||||
'zh-CN': '范围选择时开始日期的占位内容',
|
||||
'en-US': 'Placeholder of the start date when the range is selected'
|
||||
|
|
@ -304,8 +310,9 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'step',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'type': 'IStep',
|
||||
'typeAnchorName': 'IStep',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '自定义时分秒步长',
|
||||
'en-US': 'Indicates whether to select a time range. This parameter is valid only for <tiny-time-picker>.'
|
||||
|
|
@ -314,41 +321,39 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'suffix-icon',
|
||||
'type': 'string',
|
||||
'defaultValue': '该自定后置图标， 该属性的默认值为 IconCalendar',
|
||||
'desc': { 'zh-CN': '自定义头部图标的类名', 'en-US': 'Custom Clear Icon' },
|
||||
'type': 'object',
|
||||
'defaultValue': 'IconCalendar',
|
||||
'desc': {
|
||||
'zh-CN': '自定义头部图标的类名',
|
||||
'en-US': 'Custom Clear Icon'
|
||||
},
|
||||
'demoId': 'suffix-icon'
|
||||
},
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'blur',
|
||||
'type': 'Function(arg)',
|
||||
'defaultValue': '',
|
||||
'type': '() => void',
|
||||
'desc': {
|
||||
'zh-CN': '当 input 失去焦点时触发;arg:{object 时间组件Vue对象}',
|
||||
'zh-CN': '当 input 失去焦点时触发',
|
||||
'en-US': 'This event is triggered when the input loses focus. arg:{object Time Component Vue Object}'
|
||||
},
|
||||
'demoId': 'event'
|
||||
},
|
||||
{
|
||||
'name': 'change',
|
||||
'type': 'Function(arg)',
|
||||
'defaultValue': '',
|
||||
'type': '(date: Date | Date[]) => void',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'用户确认选定的值时触发;arg:{Date|Array 非范围选择时，是当前选定值的时间对象；范围选择时，是当前选定值的时间对象数组}',
|
||||
'en-US':
|
||||
'This event is triggered when the user confirms the selected value. arg:{Date|Array is the time object of the currently selected value when it is not selected in a range. When the range is selected, it is the time object array of the currently selected value}'
|
||||
'zh-CN': '用户确认选定的值时触发',
|
||||
'en-US': 'This event is triggered when the user confirms the selected value. arg:{Date|Array is the time object of the currently selected value when it is not selected in a range. When the range is selected, it is the time object array of the currently selected value}'
|
||||
},
|
||||
'demoId': 'event'
|
||||
},
|
||||
{
|
||||
'name': 'focus',
|
||||
'type': 'Function(arg)',
|
||||
'defaultValue': '',
|
||||
'type': '() => void',
|
||||
'desc': {
|
||||
'zh-CN': '当 input 获得焦点时触发;arg:{object 时间组件Vue对象}',
|
||||
'zh-CN': '当 input 获得焦点时触发',
|
||||
'en-US': 'This event is triggered when the input is focused. arg:{object Time Component Vue object}'
|
||||
},
|
||||
'demoId': 'event'
|
||||
|
|
@ -358,9 +363,11 @@ export default {
|
|||
'methods': [
|
||||
{
|
||||
'name': 'focus',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '使 input 获取焦点', 'en-US': 'Enable input to focus.' },
|
||||
'type': '() => void',
|
||||
'desc': {
|
||||
'zh-CN': '使 input 获取焦点',
|
||||
'en-US': 'Enable input to focus.'
|
||||
},
|
||||
'demoId': 'event'
|
||||
}
|
||||
],
|
||||
|
|
@ -417,5 +424,30 @@ export default {
|
|||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
'types': [
|
||||
{
|
||||
name: 'IStep',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IStep {
|
||||
hour: number
|
||||
minute: number
|
||||
second: number
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IPickerOptions',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IPickerOptions {
|
||||
// 可选的时间范围
|
||||
selectableRange: string
|
||||
// 下拉框中显示的格式
|
||||
format: string
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
<td v-if="!key.includes('slots')">
|
||||
<a
|
||||
v-if="row.typeAnchorName"
|
||||
:href="`#${row.typeAnchorName}`"
|
||||
:href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
|
||||
v-html="row.type"
|
||||
@click="handleTypeClick"
|
||||
></a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue