PickerTime 时间选择器

介绍

时间选择器，用于选择时、分、秒。

基础用法

通过 v-model 绑定当前选中时间，设置空数组时默认选中 当前时间。

<vd-picker-time v-model="time" title="基础用法" />

const time = ref([]);

自定义列类型

通过 columns-type 属性来控制选项的类型，支持以任意顺序对 hour、minute 和 second 进行排列组合。

<vd-picker-time
  v-model="time"
  title="自定义列"
  :columns-type="columnsType"
/>

import type { PickerTimeColumnsType } from 'vital-design';

const time = ref([]);

const columnsType: PickerTimeColumnsType = [
  'hour',
  'minute',
  'second',
];

限制日期范围

通过 min-time 和 max-time 属性来设定可选的时间范围，支持 dayjs 日期。

<vd-picker-time
  v-model="time"
  title="限制日期范围"
  :min-time="limit.min"
  :max-time="limit.max"
/>

import dayjs from 'dayjs';

const time = ref([]);

// 字符日期
const limit = reactive({
  min: '09:00:00',
  max: '12:00:00',
});

// dayjs日期
const limit2 = reactive({
  min: dayjs().subtract(1, 'hour'),
  max: dayjs().add(1, 'hour'),
});

格式化标签

<vd-picker-time
  v-model="time"
  title="格式化标签"
  :formatter="timeOptionFormatter"
/>

import type { PickerTimeFormatter } from 'vital-design';

const time = ref([]);

const timeOptionFormatter: PickerTimeFormatter = (type, value) => {
  if (type === 'hour') {
    return 'H' + value;
  }

  if (type === 'minute') {
    return 'M' + value;
  }

  return '';
}

过滤日期选项

<vd-picker-time
  v-model="time"
  title="过滤日期选项"
  :filter="timeOptionFilter"
/>

import type { PickerTimeFilter } from 'vital-design';

const time = ref([]);

const timeOptionFilter: PickerTimeFilter = (type, options, values) => {
  if (type === 'hour') {
    return options.filter(({ value }) => ['08', '17'].includes(value));
  }

  if (type === 'minute') {
    return options.filter(({ value }) => ['01', '30', '59'].includes(value));
  }

  return options;
}

API

Props

参数	说明	类型	默认值
v-model	选中值	(string | number)[]	-
min-time	最小日期	string | number | Date | dayjs.Dayjs	'00:00:00'
max-time	最大日期	string | number | Date | dayjs.Dayjs	'23:59:59'
columns-type	选项类型	'hour' | 'minute' | 'second'	['hour', 'minute']
filter	过滤选项方法	PickerTimeFilter	-
formatter	格式化标签方法	PickerTimeFormatter	-
title	标题	string	-
confirm-button-text	确认按钮文字	string	-
cancel-button-text	取消按钮文字	string	-
immediate-change	是否在手指松开时立即触发 change 事件	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	改变时触发	PickerTimeSelectedChangeData
updated	更新时触发	PickerTimeSelectedData
confirm	确认时触发	PickerTimeSelectedData
cancel	取消时触发	PickerTimeSelectedData

Slots

名称	说明
toolbar	工具栏