TimePicker 时间选择器

用于选择时间的组件。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定选中的时间，格式为 HH:mm。

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

const time = ref('')

带标签

通过 label 属性设置左侧标签文字。

<zq-time-picker v-model="time" label="会议时间" placeholder="请选择时间" />

限制时间范围

通过 start 和 end 属性限制可选时间范围。

<zq-time-picker
  v-model="time"
  label="营业时间"
  start="09:00"
  end="18:00"
  placeholder="请选择时间"
/>

必填标记

通过 required 属性在标签前显示必填星号。

<zq-time-picker v-model="time" label="上班时间" required placeholder="必填" />

禁用状态

通过 disabled 属性禁用选择器。

<zq-time-picker v-model="time" label="时间" disabled />

错误状态

通过 error 属性标记错误状态，通过 error-message 显示错误提示。

<zq-time-picker
  v-model="time"
  label="时间"
  error
  error-message="请选择时间"
/>

无边框

通过 border 属性控制是否显示下边框。

<zq-time-picker v-model="time" :border="false" />

API

Props

参数	说明	类型	默认值
v-model	选中的时间，格式 HH:mm	string	''
label	左侧标签文字	string	''
placeholder	占位提示文字	string	'请选择时间'
disabled	是否禁用	boolean	false
border	是否显示下边框	boolean	true
required	是否显示必填星号	boolean	false
error	是否标记为错误状态	boolean	false
error-message	错误提示文字	string	''
label-width	标签宽度	string	'180rpx'
start	可选的最小时间，格式 HH:mm	string	''
end	可选的最大时间，格式 HH:mm	string	''

Events

事件名	说明	回调参数
update:modelValue	选中时间变化时触发	value: string
change	选中时间变化时触发	value: string

Slots

名称	说明
label	自定义左侧标签

主题定制

变量名	说明
--color-bg-card	背景色
--color-divider	下边框颜色
--color-text-primary	选中值文字颜色
--color-text-placeholder	占位文字和图标颜色
--color-error	错误状态颜色