diff --git a/README.md b/README.md index a4f091b..ef7f042 100644 --- a/README.md +++ b/README.md @@ -111,48 +111,49 @@ You can also override some of the default locale by `lang`. ### Props -| Prop | Description | Type | Default | -| ------------------- | ---------------------------------------------- | ------------------------------------------- | -------------- | -| type | select the type of picker | date \|datetime\|year\|month\|time\|week | 'date' | -| range | if true, pick the range date | `boolean` | false | -| format | to set the date format. similar to moment.js | [token](#token) | 'YYYY-MM-DD' | -| value-type | data type of the binding value | [value-type](#value-type) | 'date' | -| default-value | default date of the calendar | `Date` | new Date() | -| lang | override the default locale | `object` | | -| placeholder | input placeholder text | `string` | '' | -| editable | whether the input is editable | `boolean` | true | -| clearable | if false, don't show the clear icon | `boolean` | true | -| confirm | if true, need click the button to change value | `boolean` | false | -| confirm-text | the text of confirm button | `string` | 'OK' | -| disabled | disable the component | `boolean` | false | -| disabled-date | specify the date that cannot be selected | `(date) => boolean` | - | -| disabled-time | specify the time that cannot be selected | `(date) => boolean` | - | -| append-to-body | append the popup to body | `boolean` | true | -| inline | without input | `boolean` | false | -| input-class | input classname | `string` | 'mx-input' | -| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — | -| open | open state of picker | `boolean` | - | -| popup-style | popup style | `object` | — | -| popup-class | popup classes | | — | -| shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - | -| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' | -| partial-update | whether update date when select year or month | `boolean` | false | -| range-separator | text of range separator | `string` | ' ~ ' | -| show-week-number | determine whether show week number | `boolean` | false | -| hour-step | interval between hours in time picker | 1 - 60 | 1 | -| minute-step | interval between minutes in time picker | 1 - 60 | 1 | -| second-step | interval between seconds in time picker | 1 - 60 | 1 | -| hour-options | custom hour column | `Array` | - | -| minute-options | custom minute column | `Array` | - | -| second-options | custom second column | `Array` | - | -| show-hour | whether show hour column | `boolean` | base on format | -| show-minute | whether show minute column | `boolean` | base on format | -| show-second | whether show second column | `boolean` | base on format | -| use12h | whether show ampm column | `boolean` | base on format | -| show-time-header | whether show header of time picker | `boolean` | false | -| time-title-format | format of the time header | [token](#token) | 'YYYY-MM-DD' | -| time-picker-options | set fixed time list to select | [time-picker-options](#time-picker-options) | null | -| prefix-class | set prefix class | `string` | 'mx' | +| Prop | Description | Type | Default | +| ------------------- | ------------------------------------------------ | ------------------------------------------- | -------------- | +| type | select the type of picker | date \|datetime\|year\|month\|time\|week | 'date' | +| range | if true, pick the range date | `boolean` | false | +| format | to set the date format. similar to moment.js | [token](#token) | 'YYYY-MM-DD' | +| value-type | data type of the binding value | [value-type](#value-type) | 'date' | +| default-value | default date of the calendar | `Date` | new Date() | +| lang | override the default locale | `object` | | +| placeholder | input placeholder text | `string` | '' | +| editable | whether the input is editable | `boolean` | true | +| clearable | if false, don't show the clear icon | `boolean` | true | +| confirm | if true, need click the button to change value | `boolean` | false | +| confirm-text | the text of confirm button | `string` | 'OK' | +| disabled | disable the component | `boolean` | false | +| disabled-date | specify the date that cannot be selected | `(date) => boolean` | - | +| disabled-time | specify the time that cannot be selected | `(date) => boolean` | - | +| append-to-body | append the popup to body | `boolean` | true | +| inline | without input | `boolean` | false | +| input-class | input classname | `string` | 'mx-input' | +| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — | +| open | open state of picker | `boolean` | - | +| popup-style | popup style | `object` | — | +| popup-class | popup classes | | — | +| shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - | +| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' | +| partial-update | whether update date when select year or month | `boolean` | false | +| range-separator | text of range separator | `string` | ' ~ ' | +| show-week-number | determine whether show week number | `boolean` | false | +| hour-step | interval between hours in time picker | 1 - 60 | 1 | +| minute-step | interval between minutes in time picker | 1 - 60 | 1 | +| second-step | interval between seconds in time picker | 1 - 60 | 1 | +| hour-options | custom hour column | `Array` | - | +| minute-options | custom minute column | `Array` | - | +| second-options | custom second column | `Array` | - | +| show-hour | whether show hour column | `boolean` | base on format | +| show-minute | whether show minute column | `boolean` | base on format | +| show-second | whether show second column | `boolean` | base on format | +| use12h | whether show ampm column | `boolean` | base on format | +| show-time-header | whether show header of time picker | `boolean` | false | +| time-title-format | format of the time header | [token](#token) | 'YYYY-MM-DD' | +| time-picker-options | set fixed time list to select | [time-picker-options](#time-picker-options) | null | +| prefix-class | set prefix class | `string` | 'mx' | +| scroll-duration | set the duration of scroll when hour is selected | `number` | 100 | #### Token diff --git a/README.zh-CN.md b/README.zh-CN.md index 527709f..42bd3d1 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -151,6 +151,7 @@ import 'vue2-datepicker/locale/zh-cn'; | time-title-format | 时间面板头部的格式化 | [token](#token) | 'YYYY-MM-DD' | | time-picker-options | 设置固定时间去选择 | [time-picker-options](#time-picker-options) | null | | prefix-class | 设置 class 的前缀 | `string` | 'mx' | +| scroll-duration | 设置滚动时候当选中小时的时候 | `number` | 100 | #### Token diff --git a/src/time/list-columns.vue b/src/time/list-columns.vue index a118781..e0a0a49 100644 --- a/src/time/list-columns.vue +++ b/src/time/list-columns.vue @@ -74,6 +74,10 @@ export default { }, props: { date: Date, + scrollDuration: { + type: Number, + default: 100, + }, getClasses: { type: Function, default: () => [], @@ -125,7 +129,7 @@ export default { date: { handler() { this.$nextTick(() => { - this.scrollToSelected(100); + this.scrollToSelected(this.scrollDuration); }); }, }, diff --git a/src/time/time-panel.vue b/src/time/time-panel.vue index 7ee1b9a..721d145 100644 --- a/src/time/time-panel.vue +++ b/src/time/time-panel.vue @@ -28,6 +28,7 @@ :hour-step="hourStep" :minute-step="minuteStep" :second-step="secondStep" + :scroll-duration="scrollDuration" v-bind="ShowHourMinuteSecondAMPM" @select="handleSelect" > @@ -114,6 +115,10 @@ export default { type: Boolean, default: undefined, }, + scrollDuration: { + type: Number, + default: 100, + }, }, computed: { innerValue() {