信息化建设 公司网站,购物车 信息技术分院网站后台设计课题组,wordpress兼职,中铁十二局集团有限公司前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue 开发打造丝滑的 键盘快捷键Keyboard Shortcuts前言页面效果指令输入属性定义1. 快捷键绑定数组 shortcuts2. 启用状态 enabled3. 全局监听 global4. 组合键分隔符 separator5. 修饰键顺序敏感 modifierSensitive 事件定义1. shortcut-triggered 事件2. shortcut-failed 事件 其他1. 快捷键验证2. 冲突处理3. 跨平台兼容性4. 文档和示例5. 测试 组件代码 代码测试添加参数后主要代码组件 \src\views\KeyboardShortcutsView.vue 测试代码正常跑通附其他基本代码编写路由 src\router\index.js编写展示入口 src\App.vue 页面效果相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue 开发打造丝滑的 键盘快捷键Keyboard Shortcuts
前言
在日常工作中DeepSeek 也为许多用户带来了便利。一位市场营销经理在策划一场新产品推广活动时利用 DeepSeek 进行市场分析和竞品研究。DeepSeek 通过对大量市场数据和消费者反馈的分析为他提供了详细的市场趋势报告和竞品优劣势分析。基于这些分析结果他制定了更有针对性的推广策略成功提高了新产品的市场知名度和销量。他说“DeepSeek 帮助我做出了更明智的决策让我的工作变得更加高效和轻松。
页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 键盘快捷键Keyboard Shortcuts 的功能组件所有代码都保存在components/KeyboardShortcuts 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 属性定义
1. 快捷键绑定数组 shortcuts
类型数组描述用于定义一组快捷键及其对应的回调函数或动作标识。数组中的每个元素可以是一个对象包含快捷键组合和对应的处理逻辑。例如[{ keys: Ctrl S, action: save }, { keys: Ctrl C, action: copy }]。
2. 启用状态 enabled
类型布尔值描述控制快捷键组件是否启用。当设置为 false 时快捷键将不会触发任何动作可用于临时禁用快捷键功能。
3. 全局监听 global
类型布尔值描述指定快捷键是否在全局范围内监听。如果设置为 true则无论焦点在哪个元素上快捷键都会生效如果设置为 false则只有当焦点在组件内部时快捷键才会生效。
4. 组合键分隔符 separator
类型字符串描述用于指定快捷键组合中各个键之间的分隔符默认为 。例如用户可以自定义为 -则快捷键定义可以写成 Ctrl - S。
5. 修饰键顺序敏感 modifierSensitive
类型布尔值描述指定修饰键如 Ctrl、Alt、Shift的顺序是否敏感。如果设置为 true则 Ctrl Shift A 和 Shift Ctrl A 被视为不同的快捷键如果设置为 false则它们被视为相同的快捷键。
事件定义
1. shortcut-triggered 事件
描述当用户按下定义的快捷键时触发该事件事件参数包含触发的快捷键组合和对应的动作标识。例如当用户按下 Ctrl S 时会触发该事件并传递 { keys: Ctrl S, action: save } 作为参数。
2. shortcut-failed 事件
描述当用户按下的键组合未匹配到任何定义的快捷键时触发该事件事件参数包含用户按下的键组合。可用于记录用户的无效操作或提供提示信息。
其他
1. 快捷键验证
在组件内部对用户定义的快捷键进行验证确保其格式正确避免因无效的快捷键定义导致组件出错。例如检查快捷键组合中是否包含非法字符或不支持的键。
2. 冲突处理
当多个快捷键之间存在冲突时提供相应的处理机制。可以选择忽略冲突只触发第一个匹配的快捷键也可以抛出错误或警告提示用户存在冲突。
3. 跨平台兼容性
考虑不同操作系统和浏览器对快捷键的支持情况确保组件在各种环境下都能正常工作。例如在 Mac 系统中Ctrl 键通常对应 Command 键需要进行相应的转换。
4. 文档和示例
提供详细的文档和示例说明组件的使用方法、属性和事件的含义方便其他开发者使用该组件。
5. 测试
编写单元测试和集成测试确保组件的功能正常快捷键能够正确触发和处理。测试用例应覆盖各种情况包括不同的快捷键组合、启用和禁用状态等。
你有更好的建议也可以添加要注明。组件定义好后给出5个及以上的调用示例。 下面是现有目录 vueAndDeepseek/ ├── 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/ │ │ ├── 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 │ │ ├── DatePickerView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
组件代码
根据你的需求我帮你创建了一个功能完善的键盘快捷键组件以下是实现代码和调用示例
!-- components/KeyboardShortcuts/KeyboardShortcuts.vue --
templatediv refrootslot/slot/div
/templatescript setup
import { ref, computed, watch, onMounted, onUnmounted } from vueconst props defineProps({shortcuts: {type: Array,required: true,validator: (value) value.every(item item.keys item.action)},enabled: {type: Boolean,default: true},global: {type: Boolean,default: false},separator: {type: String,default: },modifierSensitive: {type: Boolean,default: false}
})const emit defineEmits([shortcut-triggered, shortcut-failed])const root ref(null)
const isMac /macintosh|mac os x/i.test(navigator.userAgent)
let currentTarget null
let isListening falseconst keyAliases {ctrl: control,control: control,cmd: meta,command: meta,meta: meta,shift: shift,alt: alt,option: alt,esc: escape,space: ,up: arrowup,down: arrowdown,left: arrowleft,right: arrowright
}const normalizeKey (key) {const lowerKey key.toLowerCase()return keyAliases[lowerKey] || lowerKey
}const parseKeys (keysStr) {return keysStr.split(props.separator).map(k normalizeKey(k.trim())).map(k isMac k control ? meta : k)
}const normalizeCombo (keys, isModifierSensitive) {const modifiers []const others []keys.forEach(key {if ([control, meta, shift, alt].includes(key)) {modifiers.push(key)} else {others.push(key)}})if (!isModifierSensitive) {modifiers.sort()}return [...modifiers, ...others].join()
}const shortcutMap computed(() {const map new Map()props.shortcuts.forEach(shortcut {try {const keys parseKeys(shortcut.keys)const combo normalizeCombo(keys, props.modifierSensitive)if (map.has(combo)) {console.warn(Shortcut conflict: ${shortcut.keys} conflicts with existing shortcut)}map.set(combo, shortcut)} catch (e) {console.error(Invalid shortcut: ${shortcut.keys}, e)}})return map
})const handleKeyDown (event) {if (!props.enabled) returnconst pressedModifiers []if (event.ctrlKey) pressedModifiers.push(control)if (event.shiftKey) pressedModifiers.push(shift)if (event.altKey) pressedModifiers.push(alt)if (event.metaKey) pressedModifiers.push(meta)const key normalizeKey(event.key)if ([control, shift, alt, meta].includes(key)) returnconst pressedKeys [...pressedModifiers, key]const combo normalizeCombo(pressedKeys, props.modifierSensitive)const matched shortcutMap.value.get(combo)if (matched) {event.preventDefault()emit(shortcut-triggered, { keys: matched.keys, action: matched.action })if (typeof matched.action function) {matched.action()}} else {const userCombo pressedKeys.join(props.separator)emit(shortcut-failed, { keys: userCombo })}
}const updateEventListener () {if (isListening) {currentTarget.removeEventListener(keydown, handleKeyDown)isListening false}if (props.enabled) {currentTarget props.global ? window : root.valueif (currentTarget) {currentTarget.addEventListener(keydown, handleKeyDown)isListening true}}
}onMounted(updateEventListener)
onUnmounted(() {if (isListening) {currentTarget.removeEventListener(keydown, handleKeyDown)}
})watch([() props.enabled, () props.global], updateEventListener)
/script以下是5个调用示例
!-- 示例1: 基本使用 --
KeyboardShortcuts:shortcuts[{ keys: Ctrl S, action: save },{ keys: Ctrl C, action: copy }]shortcut-triggeredhandleShortcut
/!-- 示例2: 带回调函数 --
KeyboardShortcuts:shortcuts[{ keys: Ctrl K, action: () openSearch() }]
/!-- 示例3: 非全局作用域 --
KeyboardShortcuts:globalfalse:shortcuts[{ keys: Enter, action: submit }]
input typetext placeholderFocus here to use Enter shortcut
/KeyboardShortcuts!-- 示例4: 自定义分隔符 --
KeyboardShortcuts:separator-:shortcuts[{ keys: Ctrl - Alt - D, action: debug }]
/!-- 示例5: 复杂组合 --
KeyboardShortcuts:modifier-sensitivetrue:shortcuts[{ keys: Shift Ctrl Tab, action: prevTab },{ keys: Ctrl Tab, action: nextTab }]
/!-- 示例6: 禁用状态 --
KeyboardShortcuts:enabledfalse:shortcuts[...]
/组件特性
自动处理Mac系统的Command键映射支持修饰键顺序敏感设置完善的类型验证和错误提示自动处理事件监听的生命周期支持组合键和单键触发详细的调试信息输出
使用时可以根据需要组合不同的属性来实现各种快捷键场景组件会自动处理浏览器兼容性和平台差异。
代码测试 运行正常。代码示例需要添加一些参数。 添加参数后主要代码
组件 \src\views\KeyboardShortcutsView.vue
templatediv classkeyboard-shortcuts-demoh2键盘快捷键示例/h2!-- 示例1: 基本使用 --section classdemo-sectionh3基本使用/h3div classdemo-boxp尝试按下: codeCtrl S 保存/code 或 codeCtrl C 复制/code/pKeyboardShortcuts:shortcuts[{ keys: Ctrl S, action: save },{ keys: Ctrl C, action: copy }]shortcut-triggeredhandleShortcutdiv classaction-log最后执行的操作: {{ lastAction }}/div/KeyboardShortcuts/div/section!-- 示例2: 带回调函数 --section classdemo-sectionh3带回调函数/h3div classdemo-boxp尝试按下: codeCtrl K/code/pKeyboardShortcuts:shortcuts[{keys: Ctrl K,action: () openSearch()}]div classsearch-box v-ifisSearchOpen搜索框已打开button clickisSearchOpen false关闭/button/div/KeyboardShortcuts/div/section!-- 示例3: 非全局作用域 --section classdemo-sectionh3非全局作用域/h3div classdemo-boxp在输入框内按 codeEnter/code/pKeyboardShortcuts:globalfalse:shortcuts[{ keys: Enter, action: submit }]shortcut-triggeredhandleSubmitinputtypetextv-modelinputTextplaceholderFocus here to use Enter shortcutclassdemo-inputdiv classaction-log{{ submitMessage }}/div/KeyboardShortcuts/div/section!-- 示例4: 自定义分隔符 --section classdemo-sectionh3自定义分隔符/h3div classdemo-boxp尝试按下: codeCtrl-Alt-D/code/pKeyboardShortcutsseparator-:shortcuts[{ keys: Ctrl-Alt-D, action: debug }]shortcut-triggeredhandleDebugdiv classaction-log{{ debugStatus }}/div/KeyboardShortcuts/div/section!-- 示例5: 复杂组合 --section classdemo-sectionh3复杂组合/h3div classdemo-boxp尝试按下: codeShift Ctrl Tab/code 或 codeCtrl Tab/code/pKeyboardShortcuts:modifier-sensitivetrue:shortcuts[{ keys: Shift Ctrl Tab, action: prevTab },{ keys: Ctrl Tab, action: nextTab }]shortcut-triggeredhandleTabSwitchdiv classtabs-demo当前标签页: {{ currentTab }}/div/KeyboardShortcuts/div/section/div
/templatescript setup
import { ref } from vue
import KeyboardShortcuts from /components/KeyboardShortcuts/KeyboardShortcuts.vue// 状态变量
const lastAction ref()
const isSearchOpen ref(false)
const inputText ref()
const submitMessage ref()
const debugStatus ref()
const currentTab ref(1)// 事件处理函数
const handleShortcut (event) {lastAction.value 执行了 ${event.action} 操作
}const openSearch () {isSearchOpen.value true
}const handleSubmit () {submitMessage.value 提交的内容: ${inputText.value}inputText.value
}const handleDebug () {debugStatus.value 调试模式已 (debugStatus.value.includes(开启) ? 关闭 : 开启)
}const handleTabSwitch (event) {if (event.action nextTab) {currentTab.value currentTab.value 3 ? 1 : currentTab.value 1} else {currentTab.value currentTab.value 1 ? 3 : currentTab.value - 1}
}
/scriptstyle scoped
.keyboard-shortcuts-demo {padding: 20px;max-width: 800px;margin: 0 auto;
}h2 {color: #2c3e50;text-align: center;margin-bottom: 30px;
}.demo-section {margin-bottom: 30px;padding: 20px;border: 1px solid #ebeef5;border-radius: 8px;background: white;
}h3 {color: #2c3e50;margin-bottom: 15px;
}.demo-box {padding: 15px;background: #f8f9fa;border-radius: 6px;
}code {background: #e9ecef;padding: 2px 6px;border-radius: 4px;font-family: monospace;
}.action-log {margin-top: 10px;padding: 10px;background: #e9ecef;border-radius: 4px;font-size: 14px;
}.demo-input {width: 100%;padding: 8px;border: 1px solid #dcdfe6;border-radius: 4px;margin-top: 10px;
}.search-box {margin-top: 10px;padding: 10px;background: #e9ecef;border-radius: 4px;display: flex;justify-content: space-between;align-items: center;
}.search-box button {padding: 4px 8px;border: none;background: #409eff;color: white;border-radius: 4px;cursor: pointer;
}.tabs-demo {margin-top: 10px;padding: 10px;background: #e9ecef;border-radius: 4px;text-align: center;
}
/style测试代码正常跑通附其他基本代码
添加路由页面展示入口
编写路由 src\router\index.js import { createRouter, createWebHistory } from vue-router
import RightClickMenuView from ../views/RightClickMenuView.vue
import RangePickerView from ../views/RangePickerView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: progress,component: () import(../views/ProgressView.vue),},{path: /tabs,name: tabs,// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.// 标签页Tabscomponent: () import(../views/TabsView.vue),},{path: /accordion,name: accordion,// 折叠面板Accordioncomponent: () import(../views/AccordionView.vue),},{path: /timeline,name: timeline,// 时间线Timelinecomponent: () import(../views/TimelineView.vue),},{path: /backToTop,name: backToTop,component: () import(../views/BackToTopView.vue)},{path: /notification,name: notification,component: () import(../views/NotificationView.vue)},{path: /card,name: card,component: () import(../views/CardView.vue)},{path: /infiniteScroll,name: infiniteScroll,component: () import(../views/InfiniteScrollView.vue)},{path: /switch,name: switch,component: () import(../views/SwitchView.vue)},{path: /sidebar,name: sidebar,component: () import(../views/SidebarView.vue)},{path: /breadcrumbs,name: breadcrumbs,component: () import(../views/BreadcrumbsView.vue)},{path: /masonryLayout,name: masonryLayout,component: () import(../views/MasonryLayoutView.vue)},{path: /rating,name: rating,component: () import(../views/RatingView.vue)},{path: /datePicker,name: datePicker,component: () import(../views/DatePickerView.vue)},{path: /colorPicker,name: colorPicker,component: () import(../views/ColorPickerView.vue)},{path: /rightClickMenu,name: rightClickMenu,component: RightClickMenuView},{path: /rangePicker,name: rangePicker,component: () import(../views/RangePickerView.vue)},{path: /navbar,name: navbar,component: () import(../views/NavbarView.vue)},{path: /formValidation,name: formValidation,component: () import(../views/FormValidationView.vue)},{path: /copyToClipboard,name: copyToClipboard,component: () import(../views/CopyToClipboardView.vue)},{path: /clickAnimations,name: clickAnimations,component: () import(../views/ClickAnimationsView.vue)},{path: /thumbnailList,name: thumbnailList,component: () import(../views/ThumbnailListView.vue)},{path: /keyboardShortcuts,name: keyboardShortcuts,component: () import(../views/KeyboardShortcutsView.vue)}],
})export default router
编写展示入口 src\App.vue script setup
import { RouterLink, RouterView } from vue-router
import HelloWorld from ./components/HelloWorld.vue
/scripttemplateheaderimg altVue logo classlogo src/assets/logo.svg width125 height125 /div classwrapperHelloWorld msgYou did it! /navRouterLink to/Progress/RouterLinkRouterLink to/tabsTabs/RouterLinkRouterLink to/accordionAccordion/RouterLinkRouterLink to/timelineTimeline/RouterLinkRouterLink to/backToTopBackToTop/RouterLinkRouterLink to/notificationNotification/RouterLinkRouterLink to/cardCard/RouterLinkRouterLink to/infiniteScrollInfiniteScroll/RouterLinkRouterLink to/switchSwitch/RouterLinkRouterLink to/sidebarSidebar/RouterLinkRouterLink to/breadcrumbsBreadcrumbs/RouterLinkRouterLink to/masonryLayoutMasonryLayout/RouterLinkRouterLink to/ratingRating/RouterLinkRouterLink to/datePickerDatePicker/RouterLinkRouterLink to/colorPickerColorPicker/RouterLinkRouterLink to/rightClickMenuRightClickMenu/RouterLinkRouterLink to/rangePickerRangePicker/RouterLinkRouterLink to/navbarNavbar/RouterLinkRouterLink to/formValidationFormValidation/RouterLinkRouterLink to/copyToClipboardCopyToClipboard/RouterLinkRouterLink to/clickAnimationsClickAnimations/RouterLinkRouterLink to/thumbnailListThumbnailList/RouterLinkRouterLink to/keyboardShortcutsKeyboardShortcuts/RouterLink/nav/div/headerRouterView /
/templatestyle scoped
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
/style
页面效果 相关文章 ———— 相 关 文 章 ———— 0基础3步部署自己的DeepSeek安装步骤 DeepSeek 助力 Vue 开发打造丝滑的步骤条Step barhttps://blog.csdn.net/qq_33650655/article/details/145560497 DeepSeek 助力 Vue 开发打造丝滑的进度条Progress Barhttps://blog.csdn.net/qq_33650655/article/details/145577034 自己部署 DeepSeek 助力 Vue 开发打造丝滑的标签页Tabshttps://blog.csdn.net/qq_33650655/article/details/145587999 自己部署 DeepSeek 助力 Vue 开发打造丝滑的折叠面板Accordionhttps://blog.csdn.net/qq_33650655/article/details/145590404 自己部署 DeepSeek 助力 Vue 开发打造丝滑的时间线Timeline https://blog.csdn.net/qq_33650655/article/details/145597372 DeepSeek 助力 Vue 开发打造丝滑的返回顶部按钮Back to Tophttps://blog.csdn.net/qq_33650655/article/details/145615550 DeepSeek 助力 Vue 开发打造丝滑的通知栏Notification Barhttps://blog.csdn.net/qq_33650655/article/details/145620055 DeepSeek 助力 Vue 开发打造丝滑的卡片Cardhttps://blog.csdn.net/qq_33650655/article/details/145634564 DeepSeek 助力 Vue 开发打造丝滑的无限滚动Infinite Scrollhttps://blog.csdn.net/qq_33650655/article/details/145638452 DeepSeek 助力 Vue 开发打造丝滑的开关切换Switchhttps://blog.csdn.net/qq_33650655/article/details/145644151 DeepSeek 助力 Vue 开发打造丝滑的侧边栏Sidebarhttps://blog.csdn.net/qq_33650655/article/details/145654204 DeepSeek 助力 Vue 开发打造丝滑的面包屑导航Breadcrumbshttps://blog.csdn.net/qq_33650655/article/details/145656895 DeepSeek 助力 Vue 开发打造丝滑的瀑布流布局Masonry Layouthttps://blog.csdn.net/qq_33650655/article/details/145663699 DeepSeek 助力 Vue 开发打造丝滑的评分组件Ratinghttps://blog.csdn.net/qq_33650655/article/details/145664576 DeepSeek 助力 Vue 开发打造丝滑的日期选择器Date Picker未使用第三方插件 https://blog.csdn.net/qq_33650655/article/details/145673279 DeepSeek 助力 Vue 开发打造丝滑的颜色选择器Color Pickerhttps://blog.csdn.net/qq_33650655/article/details/145689522 DeepSeek 助力 Vue 开发打造丝滑的右键菜单RightClickMenuhttps://blog.csdn.net/qq_33650655/article/details/145706658 DeepSeek 助力 Vue 开发打造丝滑的范围选择器Range Pickerhttps://blog.csdn.net/qq_33650655/article/details/145713572 DeepSeek 助力 Vue 开发打造丝滑的导航栏Navbarhttps://blog.csdn.net/qq_33650655/article/details/145732421 DeepSeek 助力 Vue 开发打造丝滑的表单验证Form Validationhttps://blog.csdn.net/qq_33650655/article/details/145735582 DeepSeek 助力 Vue 开发打造丝滑的复制到剪贴板Copy to Clipboardhttps://blog.csdn.net/qq_33650655/article/details/145739569 DeepSeek 助力 Vue 开发打造丝滑的点击动画Click Animationshttps://blog.csdn.net/qq_33650655/article/details/145766184 DeepSeek 助力 Vue 开发打造丝滑的缩略图列表Thumbnail Listhttps://blog.csdn.net/qq_33650655/article/details/145776679 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
