TimePicker 時間選擇器

時間選擇器。滾輪列選擇時 / 分 / 秒，format 不含 ss 時自動隱藏秒列；arrowControl 切換為列頭箭頭控制。面板掛載到 body（Vue2 無 Teleport）。

時間選擇

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTimePicker v-model="t1" format="HH:mm:ss" placeholder="選擇時間" clearable />
      <LhTimePicker v-model="t2" format="HH:mm" placeholder="時分（無秒列）" size="small" />
      <LhTimePicker v-model="t3" format="HH:mm:ss" arrow-control placeholder="箭頭控制" size="large" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" disabled placeholder="停用" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" readonly placeholder="唯讀" />
    </div>
    <LhTimePicker
      v-model="t4"
      format="HH:mm:ss"
      :step-hour="2"
      :step-minute="15"
      :step-second="30"
      placeholder="步進：時 2 / 分 15 / 秒 30"
    />
    <p class="demo-note">時分秒：{{ fmt(t1) }}｜時分：{{ fmt(t2) }}｜箭頭：{{ fmt(t3) }}｜步進：{{ fmt(t4) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    t1: new Date(2026, 9, 3, 14, 30, 0),
    t2: null,
    t3: null,
    t4: null,
  }),
  methods: {
    fmt(v) {
      if (!(v instanceof Date)) return '（未選擇）'
      const p = (n) => String(n).padStart(2, '0')
      return p(v.getHours()) + ':' + p(v.getMinutes()) + ':' + p(v.getSeconds())
    },
  },
}
</script>

Props

屬性	說明	類型	預設值
v-model	當前選中	Date \| null	—
mode	模式（預留給日期時間聯動，當前按時間列渲染）	LhTimePickerMode	—
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	停用 / 可清空 / 唯讀	boolean	false
placeholder	佔位文字	string	語言包
format	展示格式（HH:mm:ss、HH:mm）；不含 ss 時隱藏秒列	string	'HH:mm:ss'
arrowControl	箭頭控制（列頭上下按鈕）	boolean	false
stepHour / stepMinute / stepSecond	時 / 分 / 秒步進	number	1
teleportTarget	彈出層掛載目標	string \| HTMLElement	'body'
sx	sx 快速佈局屬性	—	—

Events

input（v-model）、change (value)

無障礙

每列 role="spinbutton" + aria-valuenow/min/max，滾輪與箭頭兩種互動均支援鍵盤方向鍵； 觸發器 role="combobox" + aria-expanded，面板確認按鈕聚焦可達。