1. 项目背景与需求分析

在Vue3项目开发中，时间选择功能是表单交互的常见需求。虽然市面上有成熟的UI组件库（如Element Plus、Ant Design Vue等）提供时间选择器，但在特定业务场景下，我们往往需要高度定制化的时间选择组件。比如：

• 只需要选择小时和分钟（不需要秒和日期）
• 需要特殊的时间段限制（如仅允许选择9:00-18:00的工作时间）
• 需要与现有设计系统保持UI风格一致
• 需要特殊交互方式（如横向滑动选择）

原生HTML5的<input type="time">虽然简单，但存在浏览器兼容性问题且样式难以定制。因此，我们需要在Vue3中从头实现一个轻量级、可定制的时间选择框。

2. 核心功能设计

2.1 组件API设计

首先明确组件的props和emit设计：

props: { modelValue: { type: String, default: '' }, // 双向绑定的时间值，格式"HH:mm" minTime: { type: String, default: '00:00' }, // 可选最小时间 maxTime: { type: String, default: '23:59' }, // 可选最大时间 step: { type: Number, default: 30 }, // 分钟间隔 disabled: { type: Boolean, default: false } }, emits: ['update:modelValue', 'change']

2.2 UI结构设计

采用下拉面板+选择列表的经典结构：

<div class="time-picker"> <div class="time-input" @click="togglePanel"> {{ displayTime || '请选择时间' }} </div> <div v-if="panelVisible" class="time-panel"> <div class="hour-list"> <div v-for="h in hours" :class="{ active: h === selectedHour }" @click="selectHour(h)" > {{ h.toString().padStart(2, '0') }} </div> </div> <div class="minute-list"> <div v-for="m in minutes" :class="{ active: m === selectedMinute }" @click="selectMinute(m)" > {{ m.toString().padStart(2, '0') }} </div> </div> </div> </div>

2.3 时间数据处理

核心的时间计算逻辑：

// 生成可选小时数组 const hours = computed(() => { const result = [] const [minH] = props.minTime.split(':').map(Number) const [maxH] = props.maxTime.split(':').map(Number) for (let h = minH; h <= maxH; h++) { result.push(h) } return result }) // 生成可选分钟数组 const minutes = computed(() => { const result = [] const minM = selectedHour.value === minHour.value ? Number(props.minTime.split(':')[1]) : 0 const maxM = selectedHour.value === maxHour.value ? Number(props.maxTime.split(':')[1]) : 59 for (let m = minM; m <= maxM; m += props.step) { result.push(m) } return result })

3. 完整实现步骤

3.1 项目初始化

# 创建Vue3项目 npm init vue@latest vue3-time-picker cd vue3-time-picker npm install

3.2 组件核心实现

创建src/components/TimePicker.vue：

<script setup> import { computed, ref } from 'vue' const props = defineProps({ // ...同上文props定义 }) const emit = defineEmits(['update:modelValue', 'change']) const panelVisible = ref(false) const selectedHour = ref(null) const selectedMinute = ref(null) // 解析初始值 if (props.modelValue) { const [h, m] = props.modelValue.split(':') selectedHour.value = parseInt(h) selectedMinute.value = parseInt(m) } // ...其他计算属性同上 const displayTime = computed(() => { if (selectedHour.value !== null && selectedMinute.value !== null) { return `${selectedHour.value.toString().padStart(2, '0')}:${ selectedMinute.value.toString().padStart(2, '0')}` } return '' }) function selectHour(hour) { selectedHour.value = hour updateTime() } function selectMinute(minute) { selectedMinute.value = minute updateTime() panelVisible.value = false } function updateTime() { if (selectedHour.value !== null && selectedMinute.value !== null) { const timeStr = displayTime.value emit('update:modelValue', timeStr) emit('change', timeStr) } } function togglePanel() { if (!props.disabled) { panelVisible.value = !panelVisible.value } } </script> <template> <!-- 模板内容同上 --> </template> <style scoped> .time-picker { position: relative; display: inline-block; } .time-input { padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; cursor: pointer; } .time-panel { position: absolute; display: flex; margin-top: 4px; padding: 8px; background: white; border: 1px solid #dcdfe6; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); z-index: 100; } .hour-list, .minute-list { max-height: 200px; overflow-y: auto; } .hour-list > div, .minute-list > div { padding: 8px 12px; cursor: pointer; } .hour-list > div:hover, .minute-list > div:hover { background: #f5f7fa; } .active { color: #409eff; font-weight: bold; } </style>

3.3 使用示例

在父组件中使用：

<script setup> import { ref } from 'vue' import TimePicker from './components/TimePicker.vue' const time = ref('09:30') </script> <template> <div> <TimePicker v-model="time" :min-time="09:00" :max-time="18:00" /> <p>选择的时间: {{ time }}</p> </div> </template>

4. 高级功能扩展

4.1 键盘导航支持

为提升可访问性，添加键盘操作支持：

function handleKeydown(e) { if (!panelVisible.value) return if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault() const isHour = document.activeElement.classList.contains('hour-item') const list = isHour ? hours.value : minutes.value const current = isHour ? selectedHour.value : selectedMinute.value const index = list.indexOf(current) if (e.key === 'ArrowUp' && index > 0) { const newValue = list[index - 1] isHour ? selectHour(newValue) : selectMinute(newValue) } else if (e.key === 'ArrowDown' && index < list.length - 1) { const newValue = list[index + 1] isHour ? selectHour(newValue) : selectMinute(newValue) } } else if (e.key === 'Enter') { panelVisible.value = false } else if (e.key === 'Escape') { panelVisible.value = false } }

4.2 动画效果

添加展开/收起动画：

<transition name="slide-fade"> <div v-if="panelVisible" class="time-panel"> <!-- ... --> </div> </transition> <style> .slide-fade-enter-active { transition: all 0.3s ease-out; } .slide-fade-leave-active { transition: all 0.2s ease-in; } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateY(-10px); opacity: 0; } </style>

4.3 国际化支持

添加多语言时间格式：

const timeFormats = { 'en-US': { hour12: true }, 'zh-CN': { hour12: false } } const formatTime = (locale) => { if (!selectedHour.value && !selectedMinute.value) return '' const options = timeFormats[locale] || timeFormats['zh-CN'] const date = new Date() date.setHours(selectedHour.value) date.setMinutes(selectedMinute.value) return date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', ...options }) }

5. 性能优化与注意事项

5.1 虚拟滚动优化

当时间范围很大时（如step=1分钟），使用虚拟滚动：

<template> <RecycleScroller class="hour-list" :items="hours" :item-size="40" key-field="id" v-slot="{ item }" > <div :class="{ active: item === selectedHour }" @click="selectHour(item)" > {{ item.toString().padStart(2, '0') }} </div> </RecycleScroller> </template> <script> import { RecycleScroller } from 'vue-virtual-scroller' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' export default { components: { RecycleScroller } } </script>

5.2 点击外部关闭面板

import { onClickOutside } from '@vueuse/core' const panelRef = ref(null) onClickOutside(panelRef, () => { panelVisible.value = false })

5.3 常见问题解决

1. 时间格式不一致：

   • 问题：父组件传入的时间格式可能是"HH:mm"或"HH:mm:ss"
   • 解决：在props中添加format参数，并在组件内部统一处理

2. 时区问题：

   • 问题：new Date()会使用本地时区
   • 解决：使用UTC时间或明确指定时区

3. 移动端适配：

   • 问题：触摸屏上滚动选择更符合习惯
   • 解决：添加touch事件支持，或直接调用原生时间选择器

6. 单元测试要点

使用Vitest编写测试用例：

import { mount } from '@vue/test-utils' import TimePicker from '../TimePicker.vue' describe('TimePicker', () => { it('正确解析初始值', async () => { const wrapper = mount(TimePicker, { props: { modelValue: '09:30' } }) expect(wrapper.vm.selectedHour).toBe(9) expect(wrapper.vm.selectedMinute).toBe(30) }) it('限制时间范围', async () => { const wrapper = mount(TimePicker, { props: { minTime: '09:00', maxTime: '18:00' } }) expect(wrapper.vm.hours).toEqual([9,10,11,12,13,14,15,16,17,18]) }) it('触发change事件', async () => { const wrapper = mount(TimePicker) await wrapper.find('.hour-list > div').trigger('click') await wrapper.find('.minute-list > div').trigger('click') expect(wrapper.emitted('change')).toBeTruthy() }) })

7. 替代方案对比

在需要完全控制UI和交互逻辑的场景下，自定义实现仍然是最佳选择。对于大多数常规应用，成熟的UI库可能更合适。