定义快捷方式

使用情况

使用自动导入的defineShortcuts组合工具定义键盘快捷键。

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  meta_k: () => {
    open.value = !open.value
  }
})
</script>

• 快捷方式会针对非macOS平台自动调整，将meta转换为ctrl。
• Composable使用VueUse的useEventListener来处理keydown事件。
• 有关可用快捷键的完整列表，请参阅API文档。配置中的键不区分大小写，因此meta_k和meta_K是等效的。

API

defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): () => void

为应用程序定义键盘快捷键。返回一个删除侦听器的函数，以防您需要在卸载组件之前停止快捷键。

Parameters

php定义

快捷方式使用以下格式定义：

• 单键：'a'、'b'、'1'、'?'等
• key组合：使用_来分隔键，例如'meta_k'、'ctrl_shift_f'
• 关键序列：使用-定义序列，例如：'g-d'

Modifiers

• meta / command：在macOS上代表⌘ Command，在其他平台上代表Ctrl
• ctrl：在所有平台上代表Ctrl
• shift：当需要Shift时用于字母键
• alt / option：在macOS上代表⌥ Option，在其他平台上代表Alt。根据物理键位置匹配，因为Option在macOS上重写字符

特殊钥匙

使用这些名称匹配特殊键。

• escape：按ESC键触发
• enter：按Enter键触发
• arrowleft、arrowright、arrowup、arrowdown：按相应箭头键触发
• tab：Tab键触发
• backspace：按退格键触发
• delete：按Delete键触发
• space：在空格键上触发。需要layoutIndependent，除非与alt结合使用

### 配置

每个快捷键都可以定义为具有以下属性的函数或对象：

interface ShortcutConfig { handler: (e?: KeyboardEvent) => void; usingInput?: boolean | string }

Parameters

示例

基本用法

<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实用程序自动定义菜单项的快捷方式。