From 2e053ad76bf254fbe14cee2b3c3d2dc7766c9462 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 16 Feb 2022 10:57:09 +0800 Subject: [PATCH] feat(TimePicker): support select second --- packages/vant/src/time-picker/README.md | 44 +++++++++++++++++-- packages/vant/src/time-picker/README.zh-CN.md | 38 ++++++++++++++++ packages/vant/src/time-picker/TimePicker.tsx | 6 ++- packages/vant/src/time-picker/demo/index.vue | 14 +++++- 4 files changed, 95 insertions(+), 7 deletions(-) diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md index ddb8bbcb8..86dc18d03 100644 --- a/packages/vant/src/time-picker/README.md +++ b/packages/vant/src/time-picker/README.md @@ -35,6 +35,40 @@ export default { }; ``` +### Columns Type + +Using `columns-type` prop to control the type of columns. + +For example: + +- Pass in `['hour']` to select hour. +- Pass in `['minute']` to select minute. +- Pass in `['minute', 'second']` to select minute and second. +- Pass in `['hour', 'minute', 'second']` to select hour, minute and second. + +```html + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const currentTime = ref(['12', '00', '00']); + const columnsType = ['hour', 'minute', 'second']; + return { + currentTime, + columnsType, + }; + }, +}; +``` + ### Time Range ```html @@ -133,10 +167,12 @@ export default { | --- | --- | --- | --- | | v-model | Current time | _string[]_ | - | | columns-type | Columns type | _string[]_ | `['hour', 'minute']` | -| min-hour | Min hour for `time` type | _number \| string_ | `0` | -| max-hour | Max hour for `time` type | _number \| string_ | `23` | -| min-minute | Max minute for `time` type | _number \| string_ | `0` | -| max-minute | Max minute for `time` type | _number \| string_ | `59` | +| min-hour | Min hour | _number \| string_ | `0` | +| max-hour | Max hour | _number \| string_ | `23` | +| min-minute | Min minute | _number \| string_ | `0` | +| max-minute | Max minute | _number \| string_ | `59` | +| min-second | Min second | _number \| string_ | `0` | +| max-second | Max second | _number \| string_ | `59` | | title | Toolbar title | _string_ | `''` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` | diff --git a/packages/vant/src/time-picker/README.zh-CN.md b/packages/vant/src/time-picker/README.zh-CN.md index c025dac1e..9ac3d3d66 100644 --- a/packages/vant/src/time-picker/README.zh-CN.md +++ b/packages/vant/src/time-picker/README.zh-CN.md @@ -20,6 +20,8 @@ app.use(TimePicker); ### 基础用法 +通过 `v-model` 绑定当前选中的时间。 + ```html ``` @@ -35,6 +37,40 @@ export default { }; ``` +### 选项类型 + +通过 `columns-type` 属性可以控制选项的类型，支持以任意顺序对 `hour`、`minute` 和 `second` 进行排列组合。 + +比如： + +- 传入 `['hour']` 来单独选择小时。 +- 传入 `['minute']` 来单独选择分钟。 +- 传入 `['minute', 'second']` 来选择分钟和秒。 +- 传入 `['hour', 'minute', 'second']` 来选择小时、分钟和秒。 + +```html + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const currentTime = ref(['12', '00', '00']); + const columnsType = ['hour', 'minute', 'second']; + return { + currentTime, + columnsType, + }; + }, +}; +``` + ### 时间范围 ```html @@ -136,6 +172,8 @@ export default { | max-hour | 可选的最大小时 | _number \| string_ | `23` | | min-minute | 可选的最小分钟 | _number \| string_ | `0` | | max-minute | 可选的最大分钟 | _number \| string_ | `59` | +| min-second | 可选的最小秒数 | _number \| string_ | `0` | +| max-second | 可选的最大秒数 | _number \| string_ | `59` | | title | 顶部栏标题 | _string_ | `''` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | diff --git a/packages/vant/src/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx index a24d24ba5..c1964e86c 100644 --- a/packages/vant/src/time-picker/TimePicker.tsx +++ b/packages/vant/src/time-picker/TimePicker.tsx @@ -23,13 +23,15 @@ import { Picker } from '../picker'; const [name] = createNamespace('time-picker'); -export type TimePickerColumnType = 'hour' | 'minute'; +export type TimePickerColumnType = 'hour' | 'minute' | 'second'; const timePickerProps = extend({}, sharedProps, { minHour: makeNumericProp(0), maxHour: makeNumericProp(23), minMinute: makeNumericProp(0), maxMinute: makeNumericProp(59), + minSecond: makeNumericProp(0), + maxSecond: makeNumericProp(59), columnsType: { type: Array as PropType, default: () => ['hour', 'minute'], @@ -70,6 +72,8 @@ export default defineComponent({ return genOptions(+props.minHour, +props.maxHour, 'hour'); case 'minute': return genOptions(+props.minMinute, +props.maxMinute, 'minute'); + case 'second': + return genOptions(+props.minSecond, +props.maxSecond, 'second'); default: throw new Error( `[Vant] DatePicker: unsupported columns type: ${type}` diff --git a/packages/vant/src/time-picker/demo/index.vue b/packages/vant/src/time-picker/demo/index.vue index c26152500..9653b352c 100644 --- a/packages/vant/src/time-picker/demo/index.vue +++ b/packages/vant/src/time-picker/demo/index.vue @@ -3,6 +3,7 @@ import VanTimePicker from '..'; import { ref } from 'vue'; import { useTranslate } from '../../../docs/site/use-translate'; import type { PickerOption } from '../../picker'; +import { TimePickerColumnType } from '../TimePicker'; const t = useTranslate({ 'zh-CN': { @@ -10,6 +11,7 @@ const t = useTranslate({ minute: '分', timeRange: '时间范围', chooseTime: '选择时间', + columnsType: '选项类型', optionsFilter: '过滤选项', optionsFormatter: '格式化选项', }, @@ -18,16 +20,20 @@ const t = useTranslate({ minute: 'm', timeRange: 'Time Range', chooseTime: 'Choose Time', + columnsType: 'Columns Type', optionsFilter: 'Options Filter', optionsFormatter: 'Options Formatter', }, }); const baseTime = ref(['12', '00']); +const secondTime = ref(['12', '00', '00']); const rangeTime = ref(['12', '35']); const filterTime = ref(['12', ' 00']); const formatterTime = ref(['12', '00']); +const columnsType: TimePickerColumnType[] = ['hour', 'minute', 'second']; + const filter = (type: string, options: PickerOption[]) => { if (type === 'minute') { return options.filter((option) => Number(option.value) % 10 === 0); @@ -48,10 +54,14 @@ const formatter = (type: string, option: PickerOption) => {