TimePicker 时间选择

引入

通过以下方式来全局注册组件，更多注册方式请参考。

基础用法

通过 绑定当前选中的时间。

  1. <van-time-picker v-model="currentTime" title="选择时间" />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentTime = ref(['12', '00']);
  6.     return { currentTime };
  7.   },
  8. };

选项类型

比如：

  • 传入 ['minute'] 来单独选择分钟。
  • 传入 ['minute', 'second'] 来选择分钟和秒。
  • 传入 ['hour', 'minute', 'second'] 来选择小时、分钟和秒。
  1. <van-time-picker
  2.   v-model="currentTime"
  3.   title="选择时间"
  4.   :columns-type="columnsType"
  5. />
  1. <van-time-picker
  2.   v-model="currentTime"
  3.   title="选择时间"
  4.   :min-hour="10"
  5.   :max-hour="20"
  6.   :min-minute="30"
  7.   :max-minute="40"
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentTime = ref(['12', '35']);
  6.     return { currentTime };
  7.   },
  8. };

格式化选项

通过传入 formatter 函数，可以对选项的文字进行格式化。

  1.   v-model="currentTime"
  2.   title="选择时间"
  3.   :formatter="formatter"
  4. />

过滤选项

  1. <van-time-picker v-model="currentTime" title="选择时间" :filter="filter" />
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentTime = ref(['12', '00']);
  6.     const filter = (type, options) => {
  7.       if (type === 'minute') {
  8.         return options.filter((option) => Number(option) % 10 === 0);
  9.       }
  10.       return options;
  11.     };
  13.     return {
  15.       currentTime,
  16.     };
  17.   },
  18. };

Props

Slots

类型定义

组件导出以下类型定义：

在桌面端无法操作组件？

参见。