3分钟快速上手vue-command-palette 安装与第一个 CmdK 弹窗教程【免费下载链接】vue-command-palette⌨️ A fast, composable, unstyled command palette interface for Vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-command-palettevue-command-palette 是一个专为 Vue 3 打造的快速、可组合、无样式的命令面板Command Palette库。只需一行安装命令加上几行模板代码你就能看到熟悉的 macOS Spotlight、Raycast 式 CmdK 弹窗在自己项目中工作并支持模糊搜索与自定义快捷键。本文带你走完「安装 → 弹窗 → 快捷键」最短路径。为什么需要 Vue 命令面板命令面板让用户用键盘而不是鼠标完成高频操作——输入几个字符模糊搜索回车确认。它在 Vercel、Linear、Raycast 等产品中已成标配而vue-command-palette正是把这套体验搬进 Vue 的开源方案 命名空间组合式组件Command.Input、Command.List等结构清晰 完全无样式unstyled自带data-属性样式全由你掌控 内置 fuse.js 模糊搜索⌨️ 支持给命令绑定自定义快捷键第一步一行命令安装 vue-command-palette打开你的 Vue 3 项目用任意包管理器安装pnpm add vue-command-palette # 或 yarn add vue-command-palette # 或 npm install vue-command-palette如果想直接阅读官方 Demo 源码也可以克隆仓库git clone https://gitcode.com/gh_mirrors/vu/vue-command-palette依赖很轻核心运行库只有fuse.js模糊搜索和nanoid生成唯一 key对首屏体积非常友好。第二步搭建第一个 CmdK 命令弹窗新建一个组件导入Command组合组件并用visible状态控制弹窗显隐script langts setup import { ref } from vue import { Command } from vue-command-palette const visible ref(false) /script template button clickvisible true打开命令面板 ⌘K/button Command.Dialog :visiblevisible themecustom template #header Command.Input placeholder输入命令或搜索... / /template template #body Command.List Command.Empty未找到结果/Command.Empty Command.Group heading偏好设置 Command.Item selectvisible false切换暗色模式/Command.Item Command.Item切换语言/Command.Item /Command.Group Command.Item新建项目/Command.Item /Command.List /template /Command.Dialog /template结构说明组件作用对应 DOM 属性Command.Dialog弹窗容器Teleport 到 body提供 header/body/footer 插槽command-dialogCommand.Input搜索输入框支持模糊搜索command-inputCommand.List命令列表容器command-listCommand.Group按heading分组command-groupCommand.Item单个命令项可选中、执行command-itemCommand.Empty搜索无结果时自动显示command-empty第三步绑定 CmdK 快捷键官方推荐用vueuse/core的useMagicKeys监听按键不是只能用 CmdK任意组合键都可以script langts setup import { ref, watch } from vue import { useMagicKeys } from vueuse/core const visible ref(false) const keys useMagicKeys() const CmdK keys[MetaK] // macOS 的 CmdWindows 可用 ControlK watch(CmdK, (v) { if (v) visible.value true }) /script现在按Cmd K弹窗打开按Esc或点击遮罩关闭——一套完整的 CmdK 体验已经跑起来了。命令面板样式与动画无样式反而更自由库本身不带任何样式每个组件都输出command-前缀的data-属性直接写 CSS 即可例如[command-root] { background: #fff; }两个内置动画技巧弹窗进出场动画Command.Dialog内部已包裹 Vue 的 Transition动画名为command-dialog写对应的.command-dialog-enter-active等类名即可列表高度动画通过 CSS 变量--command-list-height过渡列表过滤时高度会平滑变化。进阶选中事件与执行命令在Command/Command.Dialog上监听select-item事件拿到ItemInfo含key和valueCommand.Item支持:perform属性传入执行函数、:shortcut展示快捷键提示、:data-value指定参与模糊搜索的值用useCommandState()组合式函数可读取当前搜索词与过滤结果。完整的命令面板示例可以直接参考官方 Demo 中的 Self.vue以及各主题的样式方案 algolia.scss 与 raycast.scss。核心文件导航组件总入口packages/index.ts弹窗实现packages/CommandDialog.vue类型定义packages/types.ts项目说明与全部用法README.md到这里你已经掌握了 vue-command-palette 安装、CmdK 命令弹窗搭建、快捷键绑定和样式定制的完整流程。下一步不妨照着 Demo 给列表加上图标和分组把它变成产品里真正的主打交互。【免费下载链接】vue-command-palette⌨️ A fast, composable, unstyled command palette interface for Vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-command-palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考