feat(TimePicker): support select second

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
+<van-time-picker
+  v-model="currentTime"
+  title="Choose Time"
+  :columns-type="columnsType"
+/>
+```
+
+```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` |
+| min-hour | Min hour | _number \| string_ | `0` |
-| max-hour | Max hour for `time` type | _number \| string_ | `23` |
+| max-hour | Max hour | _number \| string_ | `23` |
-| min-minute | Max minute for `time` type | _number \| string_ | `0` |
+| min-minute | Min minute | _number \| string_ | `0` |
-| max-minute | Max minute for `time` type | _number \| string_ | `59` |
+| 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` |

packages/vant/src/time-picker/README.zh-CN.md

@@ -20,6 +20,8 @@ app.use(TimePicker);
 
 ### 基础用法
 
+通过 `v-model` 绑定当前选中的时间。
+
 ```html
 <van-time-picker v-model="currentTime" title="选择时间" />
 ```
@@ -35,6 +37,40 @@ export default {
 };
 ```
 
+### 选项类型
+
+通过 `columns-type` 属性可以控制选项的类型，支持以任意顺序对 `hour`、`minute` 和 `second` 进行排列组合。
+
+比如：
+
+- 传入 `['hour']` 来单独选择小时。
+- 传入 `['minute']` 来单独选择分钟。
+- 传入 `['minute', 'second']` 来选择分钟和秒。
+- 传入 `['hour', 'minute', 'second']` 来选择小时、分钟和秒。
+
+```html
+<van-time-picker
+  v-model="currentTime"
+  title="选择时间"
+  :columns-type="columnsType"
+/>
+```
+
+```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_ | `取消` |

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<TimePickerColumnType[]>,
     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}`

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) => {
 
 <template>
   <demo-block card :title="t('basicUsage')">
+    <van-time-picker v-model="baseTime" :title="t('chooseTime')" />
+  </demo-block>
+
+  <demo-block card :title="t('columnsType')">
     <van-time-picker
-      v-model="baseTime"
+      v-model="secondTime"
       :title="t('chooseTime')"
-      :columns-order="['minute', 'hour']"
+      :columns-type="columnsType"
     />
   </demo-block>