Command 命令菜单
快速、可组合的 Vue 命令菜单。
组件特性
- ⚡ 快速响应：基于 Radix Vue 构建，提供极致的交互性能。
- 🧩 高度可组合：由多个小组件组合而成，灵活适配各种业务场景。
- 🎨 无样式设计：默认提供基础骨架，通过 Tailwind CSS 轻松定制外观。
- ⌨️ 键盘导航：完全支持无障碍访问，提供顺滑的键盘操作体验。
- 📋 嵌套支持：支持子命令和层级导航，轻松构建复杂的命令树。
基础用法
No results found.
Example
弹窗模式
你可以使用 BrCommandDialog 组件在对话框中渲染命令菜单。
Press ⌘K or click the button below.
Example
嵌套子命令
你可以通过切换活动页面在不同的命令组之间进行导航。
No results found.
Example
全局快捷唤起
你可以绑定全局键盘快捷键来打开命令弹窗。
Press ⌘K to open the command dialog.
Example
API
Command Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| open | boolean | true | 命令菜单的打开状态 |
| modelValue | string | '' | 选中项的值 |
| filterFunction | (val: any[], search: string) => any[] | - | 自定义过滤函数 |
CommandInput Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | '' | 搜索值 |
CommandItem Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | - | 选项的值 |
| disabled | boolean | false | 是否禁用该选项 |
CommandGroup Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| heading | string | - | 分组标题 |
CommandDialog Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| open | boolean | false | 弹窗的打开状态 |