使用自动导入的 defineShortcuts 可组合项来定义键盘快捷键。
<script setup lang="ts">
const open = ref(false)
defineShortcuts({
meta_k: () => {
open.value = !open.value
}
})
</script>
meta 转换为 ctrl。useEventListener来处理 keydown 事件。KeyboardEvent.keyAPI 文档。请注意，键应以小写形式书写。defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): void
为你的应用程序定义键盘快捷键。
250。快捷键使用以下格式定义
'a'、'b'、'1'、'?' 等。_ 分隔键，例如 'meta_k'、'ctrl_shift_f'- 定义序列，例如 'g-d'meta：在 macOS 上表示 ⌘ Command，在其他平台上表示 Ctrlctrl：在所有平台上表示 Ctrlshift：当需要 Shift 键时用于字母键escape：在 Esc 键上触发enter：在 Enter 键上触发arrowleft、arrowright、arrowup、arrowdown：在相应的方向键上触发每个快捷键都可以定义为一个函数或一个具有以下属性的对象
interface ShortcutConfig { handler: () => void; usingInput?: boolean | string }
false（默认）：快捷键仅在没有输入焦点时触发true：即使任何输入获得焦点，快捷键也会触发string：快捷键仅在指定的输入（按名称）获得焦点时触发<script setup lang="ts">
defineShortcuts({
'?': () => openHelpModal(),
'meta_k': () => openCommandPalette(),
'g-d': () => navigateToDashboard()
})
</script>
usingInput 选项允许你指定快捷键仅在特定输入获得焦点时触发。
<template>
<UInput v-model="query" name="queryInput" />
</template>
<script setup lang="ts">
const query = ref('')
defineShortcuts({
enter: {
usingInput: 'queryInput',
handler: () => performSearch()
},
escape: {
usingInput: true,
handler: () => clearSearch()
}
})
</script>
extractShortcuts 工具可用于从菜单项中自动定义快捷键
<script setup lang="ts">
const items = [{
label: 'Save',
icon: 'i-lucide-file-down',
kbds: ['meta', 'S'],
onSelect() {
save()
}
}, {
label: 'Copy',
icon: 'i-lucide-copy',
kbds: ['meta', 'C'],
onSelect() {
copy()
}
}]
defineShortcuts(extractShortcuts(items))
</script>