DeepSeek 助力 Vue3 开发：打造丝滑的时间选择器（Time Picker）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】

csdngif标识

DeepSeek 助力 Vue3 开发：打造丝滑的时间选择器（Time Picker）
- 📚前言
- 📚页面效果
- 📚指令输入
- - 定义属性
  - - 时间相关
    - 组件状态相关
    - 样式与布局相关
    - 其他
  - 定义事件
  - 其他
- 📚think
- - 📘组件代码
- 📚代码测试
- 📚整理后主要代码
- - 📘定义组件 TimePicker.vue
  - 📘调用 TimePickerView.vue
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 src\router\index.js
  - 📘编写展示入口 src\App.vue
- 📚页面效果

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的时间选择器（Time Picker）

📚前言

在当今这个科技飞速发展的时代，人工智能（AI）无疑是最为耀眼的领域之一。从智能语音助手到自动驾驶汽车，从图像识别技术到自然语言处理，AI 正以前所未有的速度渗透到我们生活的方方面面，深刻地改变着我们的生活方式和工作模式。而在这波澜壮阔的 AI 浪潮中，DeepSeek 宛如一颗璀璨的新星，迅速崛起，吸引了全球的目光。

📚页面效果

DeepSeek 助力 Vue3 开发：打造丝滑的时间选择器（Time Picker）

📚指令输入

已经创建好了一个基于Vue3的组合式API的项目(Composition API)，并能正常运行起来，请帮我用 Vue3的组合式API(Composition API) 生成一个时间选择器（Time Picker）的功能组件，所有代码都保存在components/TimePicker 下的文件夹中。功能组件的script标签中只有setup属性，使用普通 JavaScript 实现,不使用TypeScript。
功能要有，如下属性：

定义属性

时间相关

value
- 作用：绑定当前选择的时间值，支持双向绑定。
- 类型：String 或 Date
- 默认值：null
defaultValue
- 作用：设置时间选择器的默认时间。
- 类型：String 或 Date
- 默认值：当前时间
format
- 作用：指定时间的显示格式，如 HH:mm:ss、HH:mm 等。
- 类型：String
- 默认值：HH:mm
disabledHours
- 作用：设置不可选择的小时列表。
- 类型：Array<Number>
- 默认值：[]
disabledMinutes
- 作用：设置不可选择的分钟列表。
- 类型：Array<Number>
- 默认值：[]
disabledSeconds
- 作用：设置不可选择的秒数列表。
- 类型：Array<Number>
- 默认值：[]

组件状态相关

readonly
- 作用：设置时间选择器是否为只读状态。
- 类型：Boolean
- 默认值：false
disabled
- 作用：设置时间选择器是否禁用。
- 类型：Boolean
- 默认值：false
visible
- 作用：控制时间选择面板的显示与隐藏，支持双向绑定。
- 类型：Boolean
- 默认值：false

样式与布局相关

placement
- 作用：设置时间选择面板的弹出位置，如 top、bottom、left、right 等。
- 类型：String
- 默认值：bottom
size
- 作用：设置时间选择器的尺寸，如 small、medium、large。
- 类型：String
- 默认值：medium

其他

showSeconds
- 作用：设置是否显示秒数选择。
- 类型：Boolean
- 默认值：false

定义事件

update:value
- 作用：当选择的时间值发生变化时触发，用于实现双向绑定。
- 参数：String 或 Date，新的时间值。
update:visible
- 作用：当时间选择面板的显示状态发生变化时触发，用于实现双向绑定。
- 参数：Boolean，新的显示状态。
change
- 作用：当用户完成时间选择操作时触发。
- 参数：String 或 Date，选择的时间值。
open
- 作用：当时间选择面板打开时触发。
close
- 作用：当时间选择面板关闭时触发。

其他

提供插槽：使用 Vue 的插槽机制，允许用户自定义时间选择器的输入框内容、时间选择面板的样式等，增加组件的灵活性。
键盘交互：支持通过键盘上下左右箭头键选择时间，以及使用回车键确认选择，提升用户操作体验。
国际化支持：支持不同语言的时间显示和提示信息，方便不同地区的用户使用。
动画效果：为时间选择面板的显示和隐藏添加淡入淡出等动画效果，增强用户体验。
样式定制：提供一些样式类名或 CSS 变量，方便用户自定义时间选择器的样式，如颜色、字体、边框等。
文档和示例：编写详细的文档，说明每个属性和事件的作用，并提供多种使用示例，方便其他开发者使用该组件。

你有更好的建议也可以添加，要注明。组件定义好后给出5个及以上的调用示例，示例中添加完整的数据和事件，确保每个示例是独立的。
下面是现有目录
DeepSeekAndVue/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 组件目录
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Card/
│ │ ├── InfiniteScroll/
│ │ ├── Notification/
│ │ ├── Timeline/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ ├── Sidebar/
│ │ ├── Breadcrumbs/
│ │ ├── MasonryLayout/
│ │ ├── Rating/
│ │ ├── ColorPicker/
│ │ ├── RightClickMenu/
│ │ ├── RangePicker/
│ │ ├── Navbar/
│ │ ├── FormValidation/
│ │ ├── CopyToClipboard/
│ │ ├── ClickAnimations/
│ │ ├── ThumbnailList/
│ │ ├── KeyboardShortcuts/
│ │ ├── CommentSystem/
│ │ ├── QRCode/
│ │ ├── RadioButton/
│ │ ├── Slider/
│ │ ├── ScrollAnimations/
│ │ ├── TextInput/
│ │ ├── Divider/
│ │ ├── Checkbox/
│ │ ├── TagInput/
│ │ ├── DropdownSelect/
│ │ ├── List/
│ │ ├── Header/
│ │ ├── Footer/
│ │ ├── Pagination/
│ │ ├── FloatingActionButton/
│ │ ├── PasswordInput/
│ │ ├── GridLayout/
│ │ ├── Flexbox/
│ │ ├── Modal/
│ │ ├── RichTextEditor/
│ │ ├── TimePicker/
│ │ ├── DatePicker/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ └── counter.js
│ ├── views/ # 页面组件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── SwitchView.vue
│ │ ├── TimelineView.vue
│ │ ├── NotificationView.vue
│ │ ├── CardView.vue
│ │ ├── InfiniteScrollView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ ├── SidebarView.vue
│ │ ├── BreadcrumbsView.vue
│ │ ├── MasonryLayoutView.vue
│ │ ├── RatingView.vue
│ │ ├── ColorPickerView.vue
│ │ ├── RightClickMenuView.vue
│ │ ├── RangePickerView.vue
│ │ ├── NavbarView.vue
│ │ ├── FormValidationView.vue
│ │ ├── CopyToClipboardView.vue
│ │ ├── ClickAnimationsView.vue
│ │ ├── ThumbnailListView.vue
│ │ ├── KeyboardShortcutsView.vue
│ │ ├── CommentSystemView.vue
│ │ ├── QRCodeView.vue
│ │ ├── RadioButtonView.vue
│ │ ├── SliderView.vue
│ │ ├── ScrollAnimationsView.vue
│ │ ├── TextInputView.vue
│ │ ├── DividerView.vue
│ │ ├── CheckboxView.vue
│ │ ├── TagInputView.vue
│ │ ├── DropdownSelectView.vue
│ │ ├── ListView.vue
│ │ ├── HeaderView.vue
│ │ ├── FooterView.vue
│ │ ├── PaginationView.vue
│ │ ├── FloatingActionButtonView.vue
│ │ ├── GridLayoutView.vue
│ │ ├── PasswordInputView.vue
│ │ ├── FlexboxView.vue
│ │ ├── ModalView.vue
│ │ ├── RichTextEditorView.vue
│ │ ├── TimePickerView.vue
│ │ ├── DatePickerView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录

📚think

📘组件代码

我将按照您的要求创建时间选择器组件。以下是组件的实现步骤：

components/TimePicker/TimePicker.vue

组件实现代码：

<!-- components/TimePicker/TimePicker.vue -->
<template><div class="deep-time-picker" :class="[sizeClass, placementClass]"><!-- 输入框插槽 --><div class="time-input-wrapper" @click="togglePicker"><slot name="trigger"><inputclass="time-input"type="text":value="displayTime":readonly="readonly":disabled="disabled":placeholder="placeholder"/></slot></div><!-- 时间选择面板 --><transition name="fade"><divv-if="visible && !disabled"class="time-panel":class="placement"@click.stop><div class="time-columns"><!-- 小时列 --><div class="time-column"><div class="column-header">{{ hourLabel }}</div><ul ref="hourList" class="column-list"><liv-for="h in hours":key="h.value":class="[{ active: h.value === currentHour, disabled: h.disabled }]"@click="selectHour(h.value)"@keydown="handleKeyDown($event, 'hour', h.value)":tabindex="h.disabled ? -1 : 0">{{ h.formatted }}</li></ul></div><!-- 分钟列 --><div class="time-column"><div class="column-header">{{ minuteLabel }}</div><ul ref="minuteList" class="column-list"><liv-for="m in minutes":key="m.value":class="[{ active: m.value === currentMinute, disabled: m.disabled }]"@click="selectMinute(m.value)"@keydown="handleKeyDown($event, 'minute', m.value)":tabindex="m.disabled ? -1 : 0">{{ m.formatted }}</li></ul></div><!-- 秒数列 --><div v-if="showSeconds" class="time-column"><div class="column-header">{{ secondLabel }}</div><ul ref="secondList" class="column-list"><liv-for="s in seconds":key="s.value":class="[{ active: s.value === currentSecond, disabled: s.disabled }]"@click="selectSecond(s.value)"@keydown="handleKeyDown($event, 'second', s.value)":tabindex="s.disabled ? -1 : 0">{{ s.formatted }}</li></ul></div></div><!-- 面板底部操作 --><div class="panel-footer"><slot name="footer"><button class="confirm-btn" @click="confirmSelection">{{ confirmText }}</button></slot></div></div></transition></div>
</template><script setup>
import { ref, computed, watch, toRefs, onMounted } from 'vue'
import dayjs from 'dayjs'const emit = defineEmits(['update:value','update:visible','change','open','close'
])const props = defineProps({value: { type: [String, Date], default: null },defaultValue: { type: [String, Date], default: () => new Date() },format: { type: String, default: 'HH:mm' },disabledHours: { type: Array, default: () => [] },disabledMinutes: { type: Array, default: () => [] },disabledSeconds: { type: Array, default: () => [] },readonly: { type: Boolean, default: false },disabled: { type: Boolean, default: false },visible: { type: Boolean, default: false },placement: { type: String, default: 'bottom' },size: { type: String, default: 'medium' },showSeconds: { type: Boolean, default: false }
})// 国际化默认配置
const i18n = {hour: 'Hour',minute: 'Minute',second: 'Second',confirm: 'OK'
}// 转换props为响应式引用
const { value, defaultValue, format,disabledHours,disabledMinutes,disabledSeconds,visible,showSeconds
} = toRefs(props)// 当前时间状态
const currentTime = ref(dayjs(value?.value || defaultValue?.value))
const currentHour = ref(currentTime.value.hour())
const currentMinute = ref(currentTime.value.minute())
const currentSecond = ref(currentTime.value.second())// DOM引用
const hourList = ref(null)
const minuteList = ref(null)
const secondList = ref(null)// 计算显示时间
const displayTime = computed(() => {return currentTime.value.format(format.value)
})// 尺寸类名
const sizeClass = computed(() => `size-${props.size}`)// 位置类名
const placementClass = computed(() => `placement-${props.placement}`)// 生成时间选项
const generateOptions = (type) => {const max = type === 'hour' ? 23 : 59const disabled = props[`disabled${type.charAt(0).toUpperCase() + type.slice(1)}s`]return Array.from({ length: max + 1 }, (_, i) => {const value = iconst formatted = i.toString().padStart(2, '0')return {value,formatted,disabled: disabled.includes(value)}})
}const hours = computed(() => generateOptions('hour'))
const minutes = computed(() => generateOptions('minute'))
const seconds = computed(() => generateOptions('second'))// 切换选择器可见状态
const togglePicker = () => {if (props.readonly || props.disabled) returnconst newVisible = !visible.valueemit('update:visible', newVisible)if (newVisible) emit('open')else emit(