Appearance
TimePicker 时间选择框
用于选择或输入标准时间,支持滚动选择、12小时制、视觉反馈等特性。
基础用法
基本的时间选择器,支持 HH:mm:ss 格式。
12小时制
使用 use12Hours 属性开启12小时制选择,包含 AM/PM 选项。
格式控制
通过 format 属性控制展示格式,例如隐藏秒数。
视觉反馈 (特色功能)
开启 visualFeedback 后,下拉面板的背景色会根据选择的时间(早晨、中午、晚上)呈现不同的渐变色,增强时间感知的交互体验。
键盘滚动 (特色功能)
默认开启 scrollInput,在输入框聚焦时,可以使用键盘上下键快速调整分钟。
范围选择
设置 is-range 开启时间范围选择模式。
API
TimePicker 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 绑定值 | string / Date / Array | - |
| disabled | 是否禁用 | boolean | false |
| editable | 是否可输入 | boolean | true |
| clearable | 是否显示清除按钮 | boolean | true |
| size | 尺寸 | 'large' / 'default' / 'small' | 'default' |
| placeholder | 占位文本 | string | - |
| start-placeholder | 范围选择时开始时间的占位内容 | string | - |
| end-placeholder | 范围选择时结束时间的占位内容 | string | - |
| range-separator | 范围选择时的分隔符 | string | '-' |
| is-range | 是否为时间范围选择 | boolean | false |
| format | 显示格式,支持 'HH:mm:ss' 或 'HH:mm' | string | 'HH:mm:ss' |
| use12Hours | 是否使用12小时制 | boolean | false |
| visualFeedback | 是否开启视觉反馈(背景渐变) | boolean | false |
| scrollInput | 是否允许键盘上下键调整时间 | boolean | true |
TimePicker 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 值改变时触发 | (val: string) |
| visible-change | 下拉框出现/隐藏时触发 | (visible: boolean) |