vue-command-palette 8大核心组件详解：Command.Root、Dialog、Input、List、Group、Item 一文读懂

vue-command-palette 8大核心组件详解Command.Root、Dialog、Input、List、Group、Item 一文读懂【免费下载链接】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组件库让你用Command K快捷键唤起搜索式操作面板复刻 macOS Spotlight 与 Raycast 的交互体验。本文带你一文读懂它的 8 大核心组件Command.Root、Command.Dialog、Command.Input、Command.List、Command.Group、Command.Item以及辅助组件Separator、Empty、Loading帮你快速上手搭建属于自己的命令面板。为什么需要 Vue 命令面板组件传统网站靠鼠标逐级点击菜单效率有限。命令面板让用户通过键盘输入关键词、方向键选择、回车执行一步直达任意功能是现代 SaaS 产品的标配交互。vue-command-palette 的核心设计思路是复合组件 命名空间组件一个Command对象下挂载了全部子组件以Command.List这样的点号标签即可使用。所有组件不带任何样式只负责行为与结构外观完全由你通过command-前缀的 data 属性自由定制。8大组件一览表先建立整体印象组件data 属性职责Command.Root[command-root]根容器管理键盘导航与模糊搜索状态Command.Dialog[command-dialog]弹窗版根容器Teleport 到 bodyCommand.Input[command-input]搜索输入框驱动过滤Command.List[command-list]结果列表容器自动计算高度Command.Group[command-group]按标题分组Command.Item[command-item]可选项支持快捷键与选中事件Command.Separator[command-separator]分割线Command.Empty[command-empty]无结果时自动显示的空状态Command.Loading[command-loading]手动控制的加载态全部组件在入口文件 packages/index.ts 中被聚合导出类型定义见 packages/types.ts。1. Command.Root命令面板的“大脑”Command.Root是整个面板的核心packages/CommandRoot.vue它承担三件大事键盘导航监听↑/↓、Home/End、CtrlJ/KVim 风格Alt↑/↓按组跳转Meta↑/↓直接跳到首尾项回车触发选中L207-L253模糊搜索内置 Fuse.js 索引默认匹配label字段可通过fuseOptions自定义阈值与匹配字段选中联动选中项变化时自动scrollIntoView保证当前项始终可见Command themecustom !-- 所有其他 Command 组件 -- /Commandtheme属性会透传为 class 和[command-theme]属性方便你按主题切换样式。2. Command.Dialog弹出式命令面板Command.Dialogpackages/CommandDialog.vue是在 Root 基础上封装的弹窗形态适合Command K唤起的浮层场景通过:visible控制显隐Teleport到body避免被父级样式干扰内置 VueTransition名称command-dialog你可以直接写.command-dialog-enter-active等类定制出入场动画提供#header、#body、#footer三个插槽输入框放 header、结果放 body、快捷键提示放 footer参考 src/components/command/raycast/Raycast.vue 中的完整示例Command.Dialog :visiblevisible themeraycast template #header Command.Input placeholder输入命令或搜索... / /template template #body Command.List.../Command.List /template /Command.Dialog弹层内部还细分了[command-dialog-mask]遮罩、[command-dialog-wrapper]主体等属性样式示例见 src/assets/scss/algolia.scss。3. Command.Input模糊搜索的入口Command.Inputpackages/CommandInput.vue是一个自动聚焦的原生input输入内容会实时写入共享状态search触发 Root 的过滤逻辑。支持placeholder、v-model:value双向绑定关闭了拼写检查与自动补全rolecombobox保证无障碍语义每输入一个字符匹配的 Item 会即时过滤、不匹配的分组自动隐藏——这就是模糊搜索的“所见即所得”4. Command.List列表容器与高度动画Command.Listpackages/CommandList.vue包裹所有 Group 和 Item一个亮点它用ResizeObserver监听内容高度并写入 CSS 变量--command-list-height让列表高度随结果数量平滑动画零 JS 参与[command-list] { height: var(--command-list-height); transition: height 100ms ease; max-height: 500px; }5. Command.Group分组让结果更清晰Command.Grouppackages/CommandGroup.vue接收heading标题把一组 Item 归拢在一起。搜索时只有包含匹配项的分组才会显示空分组自动消失避免满屏空标题Command.Group headingPreferences Command.Item切换深色模式/Command.Item Command.Item更改语言/Command.Item /Command.Group配合键盘的Alt↑/↓可以整组整组地跳转。6. Command.Item最关键的命令项Command.Itempackages/CommandItem.vue是面板里真正“可执行”的单元能力包括data-value选中回调中返回的值ItemInfo.valueselect事件点击或回车触发收到{ key, value }两个字段shortcutperform声明全局快捷键数组如[meta, k]按到组合键时自动执行perform函数——不必选中也能触发搜索时被过滤掉的项自动隐藏当前选中项带aria-selected状态供样式高亮7. 辅助三件套Separator、Empty、LoadingCommand.Separator组内/组间的分割线roleseparatorCommand.Empty无搜索结果时自动渲染packages/index.ts 中根据filtered.count 0判断一句话提示“无结果”Command.Loading加载态由你手动用v-if控制显隐常用于异步拉取命令列表键盘快捷键速查表按键行为↑/↓上/下一个命令项CtrlJ/CtrlKVim 风格下/上移动Alt↑/Alt↓跳到上/下一个分组Meta↑/Meta↓跳到首项 / 末项Home/End首项 / 末项Enter执行当前选中项唤出面板的触发键如CommandK由你自己绑定官方推荐用vueuse/core的useMagicKeysREADME 中给出了完整示例。上手三步走安装、组装、定制安装pnpm add vue-command-palette组装按上面各节把 Input、List、Group、Item 嵌进Command或Command.Dialog最小结构如下Command themevercel Command.Input placeholder输入命令或搜索... / Command.List Command.Empty未找到结果。/Command.Empty Command.Group headingActions Command.Item :data-valueitem v-foritem in list selectonSelect{{ item }}/Command.Item /Command.Group /Command.List /Command定制所有行为属性都以command-开头的 data 属性暴露用 CSS 选择器[command-root]、[command-item][aria-selectedtrue]等即可实现任意风格仓库 src/assets/scss/ 下附带了 Raycast、Vercel、Linear、Algolia、Framer 五套主题样式可作参考。总结小体积大扩展vue-command-palette 用 8 个轻量组件覆盖了命令面板的完整能力Root 管导航与搜索、Dialog 管弹窗、Input 管输入、List 管高度动画、Group 管分组、Item 管执行Separator/Empty/Loading 补齐体验。无样式的设计让你 100% 掌控外观模糊搜索与键盘快捷键开箱即用是 Vue 项目中打造 Raycast 级交互体验的极简方案。【免费下载链接】vue-command-palette⌨️ A fast, composable, unstyled command palette interface for Vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-command-palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考