TimePicker 时间选择器

用于选择或输入时间。

基础用法

未选择

<my-time-picker v-model="time" placeholder="选择时间" />

尺寸

<my-time-picker v-model="time" size="large" />
<my-time-picker v-model="time" />
<my-time-picker v-model="time" size="small" />

格式选项

format 控制显示格式。

值:

<my-time-picker v-model="time" format="HH:mm" />

可清除

×

<my-time-picker v-model="time" clearable />

禁用

<my-time-picker v-model="time" disabled />

自定义指示器

#trigger 插槽自定义触发元素。

<my-time-picker v-model="time">
  <template #trigger="{ toggle, value }">
    <my-button @click="toggle">{{ value || '点击选择时间' }}</my-button>
  </template>
</my-time-picker>

表单校验

结合 Form 组件的校验规则使用，支持自定义 validator。

<my-form ref="formRef" :model="form" :rules="rules">
  <my-form-item prop="time" label="时间">
    <my-time-picker v-model="form.time" />
  </my-form-item>
</my-form>

<script setup>
const rules = {
  time: [{ required: true, message: '请选择时间', trigger: 'change' }],
  wake: [
    { required: true, message: '请选择', trigger: 'change' },
    {
      validator: (val, cb) => {
        if (val < '06:00:00') cb('不能早于6点')
        else cb()
      },
    },
  ],
}
</script>

组件结构

<div> 根元素包含触发区（输入框 + 后缀图标 + 清除按钮）和下拉面板。面板内分时间选择主体（时/分/秒三列带增减按钮和数值）和底部操作区（"此刻"和"确定"按钮）。

CSS 类名

类名	说明
.my-time-picker	根元素
.is-large	大尺寸
.is-small	小尺寸
.my-time-picker__trigger	触发区域
.my-time-picker__input	输入框
.my-time-picker__suffix	后缀图标
.my-time-picker__clear	清除按钮
.my-time-picker__panel	下拉面板
.my-time-picker__body	时间选择主体
.my-time-picker__unit	时/分/秒单元
.my-time-picker__value	时间数值
.my-time-picker__colon	冒号分隔符
.my-time-picker__spin	增减按钮
.my-time-picker__actions	底部操作区
.my-time-picker__btn	操作按钮
.my-time-picker__btn--now	"此刻"按钮
.my-time-picker__btn--confirm	"确定"按钮
.-fade-*	面板过渡动画

API

Props

属性	说明	类型	默认值
modelValue	绑定值 (v-model, HH:mm:ss)	string	—
placeholder	占位文字	string	'选择时间'
format	显示格式	string	—
size	尺寸	'large' | 'default' | 'small'	'default'
disabled	禁用	boolean	false
clearable	可清除	boolean	false

Events

事件	说明	回调
update:modelValue	v-model 更新	(value: string)
change	值改变	(value: string)
blur	失焦	(e: FocusEvent)
focus	获焦	(e: FocusEvent)

Slots

名称	说明	作用域
trigger	自定义触发元素	{ value, toggle, clear }

格式化标记

标记	说明
HH	小时 (24h)
mm	分钟
ss	秒