defineショートカット

使用法

自動インポートされたdefineShortcutsコンポーザブルを使用して、キーボードショートカットを定義します。

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

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

• ショートカットはmacOS以外のプラットフォーム用に自動的に調整され、metaからctrlに変換されます。
• コンポーザブルは、VueUseのuseEventListenerを使用してキーダウンイベントを処理します。
• 利用可能なショートカットキーの完全なリストについては、KeyboardEvent.key APIドキュメントを参照してください。設定内のキーは大文字小文字を区別しないため、meta_kとmeta_Kは等価です。

API

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

アプリケーションのキーボードショートカットを定義します。コンポーネントのアンマウント前にショートカットを停止する必要がある場合に備えて、リスナーを削除する関数を返します。

パラメータ

ショートカット定義

ショートカットは以下の形式で定義されます。

• シングルキー：'a'、'b'、'1'、'?'など。
• キーの組み合わせ_を使用してキーを分離します。例：'meta_k'、'ctrl_shift_f'
• キーシーケンス-を使用してシーケンスを定義します。例：'g-d'

修飾子

• 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タブキーのトリガー
• backspace Backspaceキーのトリガー
• delete Deleteキーのトリガー
• spaceスペースバーのトリガー。altと組み合わせない限り、layoutIndependentが必要です。

ショートカット設定

各ショートカットは、次のプロパティを持つ関数またはオブジェクトとして定義できます。

interface ShortcutConfig { handler: (e?: KeyboardEvent) => void; usingInput?: boolean | 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ユーティリティを使用して、メニュー項目からショートカットを自動的に定義します。