TimePicker 时间选择

用于选择时间，支持时分秒、时分等模式。

基础用法

<template>
  <button @click="show = true">选择时间</button>
  <text>{{ value }}</text>

  <dr-time-picker
    v-model:show="show"
    title="选择时间"
    @confirm="onConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const value = ref('')

const onConfirm = (e) => {
  value.value = e.value // 14:30:00
}
</script>

时分模式

设置 mode="hour-minute" 只选择时分。

<dr-time-picker
  v-model:show="show"
  mode="hour-minute"
  title="选择时间"
  @confirm="onConfirm"
/>

限制时间范围

通过 min-time 和 max-time 限制可选时间范围。

<dr-time-picker
  v-model:show="show"
  min-time="09:00:00"
  max-time="18:00:00"
  title="选择工作时间"
/>

默认时间

通过 v-model 设置默认选中的时间。

<dr-time-picker
  v-model:show="show"
  v-model="time"
  title="选择时间"
/>

<script setup>
const time = ref('12:00:00')
</script>

API

Props

参数	说明	类型	默认值
v-model:show	是否显示	boolean	false
v-model	当前选中时间	string	''
mode	模式：time hour-minute	string	time
min-time	最小可选时间	string	00:00:00
max-time	最大可选时间	string	23:59:59
title	标题	string	选择时间
show-toolbar	是否显示工具栏	boolean	true
confirm-text	确认按钮文字	string	确定
cancel-text	取消按钮文字	string	取消
hour-suffix	小时单位	string	时
minute-suffix	分钟单位	string	分
second-suffix	秒单位	string	秒
mask-closable	点击遮罩是否关闭	boolean	true
z-index	层级	number	5000

Events

事件名	说明	回调参数
confirm	点击确认时触发	{ value: string }
cancel	点击取消时触发	-
change	选择变化时触发	{ value: string }
close	关闭时触发	-