docs_vue2/one/docs/components/time-picker.md
2020-08-13 11:47:56 +08:00

2.9 KiB

TimePicker 时间选择

示例

三种模式

支持三种模式,分别是 hourminutesecond,可以通过 mode 属性来控制。

定制时间选项

支持定制时间选项,分别可以通过 hoursminutesseconds 来定制对应的时间选项。

范围限制

支持范围限制,可以通过 minmax 来分别设置最小值和最大值。

API

属性

名称 类型 默认值 描述
ui string= - [^ui]
mode string 'second' 指定选择的粒度,分别精确到时(hour)、分(minute)、秒(second)。
value string [^prop-value]
placeholder string timepicker.placeholder 未选择时的占位文本。
hours Array<number> - 小时选项,默认 0-23。
minutes Array<number> - 分钟选项,默认 0-59。
seconds Array<number> - 秒钟选项,默认 0-59。
min string - 最小值限制。
max string - 最大值限制。
autofocus boolean false 是否自动获得焦点。
clearable boolean false 已选值是否可以清除。
disabled boolean= false 是否为禁用状态。
readonly boolean= false 是否为只读状态。

^^^ui 预设样式。为空格分隔的一组枚举值的组合。

+++枚举值

描述
s 小尺寸样式。
m 中尺寸样式。
+++
^^^

^^^prop-value :::badges v-model :::

当前选中的值。 ^^^

插槽

名称 描述
option [^scoped-slot-option]

^^^scoped-slot-option

下拉面板中的时间选项插槽。

+++作用域参数

名称 类型 描述
label string 用来显示的文字描述。
value string 实际对应的值。
disabled boolean= 是否禁用。
part string 该选项是哪个部分,分别是 hour/minute/second
+++
^^^

事件

名称 描述
input [^event-input]
change 若当前选中的值发生变化,在时间选择下拉面板关闭时会触发该事件,参数是当前选中值。
clear 清除当前选中的值。

^^^event-input :::badges v-model :::

当手动输入或下拉面板中选值会触发该事件,参数是当前输入值。 ^^^

全局配置

配置项 类型 默认值 描述
timepicker.placeholder string @@timepickerpicker.placeholder 未选择时的占位文本。

:::tip @@ 开头的值表示引用多语言配置中的相应字段。 :::

图标

名称 描述
clock 时钟。
clear 清除内容。