CommandPalette 命令面板

用于全局快捷指令/搜索的命令面板。

基础用法

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
const selected = ref('')

const commands = [
  { id: 'open', title: 'Open File', description: 'Quickly open a file', shortcut: 'Cmd/Ctrl+O' },
  { id: 'search', title: 'Global Search', description: 'Search across content', shortcut: 'Cmd/Ctrl+K' },
  { id: 'settings', title: 'Settings', description: 'Open preferences', shortcut: 'Cmd/Ctrl+,' },
]

function onSelect(command: { title: string }) {
  selected.value = command.title
}
</script>

<template>
  <TxButton variant="primary" @click="open = true">
    Open command palette
  </TxButton>
  <TxCommandPalette v-model="open" :commands="commands" @select="onSelect" />
</template>

API

TxCommandPalette Props

属性名	类型	默认值	说明
`modelValue`	`boolean`	-	显示状态
`commands`	`CommandPaletteItem[]`	`[]`	命令列表
`placeholder`	`string`	`'Search commands'`	搜索占位
`emptyText`	`string`	`'No commands found'`	空提示
`maxHeight`	`number`	`320`	列表最大高度
`autoFocus`	`boolean`	`true`	自动聚焦
`closeOnSelect`	`boolean`	`true`	选中后关闭

CommandPaletteItem

字段	类型	说明
`id`	`string`	唯一标识
`title`	`string`	标题
`description`	`string`	描述
`keywords`	`string[]`	关键词
`icon`	`TxIconSource \| string`	图标
`shortcut`	`string`	快捷键
`disabled`	`boolean`	禁用

Events

事件名	参数	说明
`update:modelValue`	`(value)`	显示状态
`select`	`(item)`	选中命令
`open`	-	打开
`close`	-	关闭
`update:query`	`(value)`	搜索输入