---
url: /components/command-palette.md
---
# CommandPalette 命令面板

⌘K 风格的命令面板：关键词过滤（名称 + 关键词 + 分组）、分组渲染、↑↓/Enter/Esc 全键盘操作。适合中后台的全局快捷入口与动作搜索。

## 基础用法

面板由 `v-model` 控制开关；动作执行后自动关闭，`action` 返回 `false` 可保持面板打开（如需二次确认的场景）：

## 快捷键唤起

页面级接入通常配合全局快捷键，注意在卸载时移除监听：

```vue
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const open = ref(false)
const onKeydown = (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
    e.preventDefault()
    open.value = !open.value
  }
}
onMounted(() => window.addEventListener('keydown', onKeydown))
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
</script>

<template>
  <eb-command-palette v-model="open" :commands="commands" />
</template>
```