如何在 Vue 项目中实现 CmdK 弹窗vue-command-palette 完整使用指南【免费下载链接】vue-command-palette⌨️ A fast, composable, unstyled command palette interface for Vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-command-palettevue-command-palette 是一个快速、可组合、无样式的 Vue 命令面板Command Palette组件库按⌘ K呼出弹窗输入关键词模糊搜索命令全程键盘操作。它的设计灵感来自 macOS Spotlight 和 Raycast核心就是Command.Dialog弹窗 一组命名空间子组件让 Vue 项目几分钟内就能拥有现代 Web 应用的命令面板体验。为什么 Vue 项目需要 CmdK 命令面板 用过 Raycast、Spotlight 或 GitHub 搜索框的同学都熟悉这种交互一个弹窗 一个输入框把切换主题、跳转页面、执行操作全部收敛到一处比层层菜单快得多。在 Vue 项目中实现它通常要自己处理弹窗定位、焦点管理、键盘导航、模糊搜索、分组过滤……vue-command-palette把这些全部封装好了你只负责填内容能力说明 复合组件设计Command.Dialog/Command.Input/Command.List等即插即用 模糊搜索内置 Fuse.js输入即可过滤命令项⌨️ 全键盘操作方向键、Enter、Esc还支持 vim 风格按键 无样式零内置样式用 data 属性自定义任意主题⚡ 体积小依赖极少MinZip 仅数 KB一键安装三种包管理器任选在项目根目录执行任选其一npm i vue-command-palette # 或 pnpm add vue-command-palette # 或 yarn add vue-command-palette安装完成后只需从包中引入Commandscript setup import { Command } from vue-command-palette /script最快搭建方法用 Command.Dialog 创建弹窗Command.Dialog是弹窗形态的根组件它通过 Teleport 把弹窗渲染到body上用:visible控制显隐用theme指定主题类名。它提供#header、#body、#footer三个插槽内部还内置了名为command-dialog的 Transition 过渡动画。一个最小可用的弹窗结构Command.Dialog :visiblevisible themecustom template #header Command.Input placeholder输入命令或搜索... / /template template #body Command.List Command.Empty没有找到结果/Command.Empty Command.Group heading操作 Command.Item切换暗色模式/Command.Item Command.Item刷新页面/Command.Item /Command.Group /Command.List /template /Command.Dialog各插槽对应的 data 属性样式定位用插槽内部 data 属性用途#header[command-dialog-header]放搜索输入框#body[command-dialog-body]放命令列表#footer[command-dialog-footer]放快捷键提示、logo 等遮罩层[command-dialog-mask]点击可关闭自己监听 没有搜索结果时Command.Empty会自动显示无需手动判断。绑定 CmdK 快捷键打开与关闭⌘ K只是约定俗成任何按键组合都可以。项目使用 vueuse/core 的useMagicKeys来监听按键演示代码见 src/App.vuescript setup import { useMagicKeys } from vueuse/core const keys useMagicKeys() const CmdK keys[MetaK] // Windows/Linux 上可换成 ControlK const Escape keys.Escape watch(CmdK, (v) { if (v) visible.value true // 按下 ⌘K 打开弹窗 }) watch(Escape, (v) { if (v) visible.value false // 按 Esc 关闭 }) /script关闭方式有三种Esc 键、点击遮罩层监听command-dialog-mask上的点击、或在选中项时自动关闭。命令面板键盘操作速查Command.Root内置了完整的键盘导航全部开箱即用实现见 packages/CommandRoot.vue按键行为↓/↑选中下一项 / 上一项Meta ↓/Meta ↑跳到最后一项 / 第一项Alt ↓/Alt ↑跳到下一组 / 上一组Ctrl J/Ctrl Kvim 风格下移 / 上移Home/End跳到第一项 / 最后一项Enter触发选中项监听选择事件与全局快捷键用户选中某一项点击或按 Enter时可以通过select拿到该项的data-value值这是执行具体逻辑的入口Command.Item v-foritem in items :data-valueitem.label selecthandleSelect {{ item.label }}/Command.Item此外Command.Item还支持shortcutperform属性组合为命令绑定全局快捷键——即使弹窗没打开只要按下组合键就执行动作如[G,T]触发切换暗色模式效果可参考 src/components/command/Self.vue。无样式设计用 data 属性定制任意主题组件完全无内置样式每个子组件都带有command-*前缀的 data 属性方便精准定位样式组件data 属性Command(Root)[command-root]Command.Dialog[command-dialog-mask]、[command-dialog-wrapper]Command.Input[command-input]Command.List[command-list]Command.Group[command-group-heading]、[command-group-items]Command.Item[command-item][command-root] { background: #ffffff; } [command-list] { height: var(--command-list-height); /* 配合该 CSS 变量做高度过渡动画 */ transition: height 100ms ease; } 项目src/assets/scss/目录下自带algolia、linear、vercel、raycast、framer五套主题示例样式可直接抄作业。弹窗开合动画则是基于 Transition 的command-dialog类名自定义command-dialog-enter-active等类即可。源码结构一览从哪开始读想深入定制时按这张表快速定位文件说明packages/CommandDialog.vue弹窗实现Teleport、Transition、三插槽packages/CommandRoot.vue根组件键盘导航、Fuse.js 模糊搜索packages/CommandItem.vue命令项选中事件、shortcut 快捷键packages/CommandInput.vue搜索输入框packages/types.ts全部组件的 Props / Events 类型定义src/components/command/Self.vue完整可运行的弹窗 Demo含 footer 快捷键提示小结✅ 一行pnpm add vue-command-palette安装 ✅ 用Command.DialogCommand.InputCommand.List搭出 CmdK 弹窗 ✅useMagicKeys绑定⌘K打开、Esc关闭 ✅select拿到data-value执行业务逻辑 ✅ 用command-*data 属性写出属于自己产品的主题。从弹窗到模糊搜索再到全键盘操作vue-command-palette 让你用最少代码把 Raycast 级的交互体验带进 Vue 项目。【免费下载链接】vue-command-palette⌨️ A fast, composable, unstyled command palette interface for Vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-command-palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考