ショートカットの設定

環境: client

このセットアップ関数は、クライアント環境でのみ実行されます。パッケージをインポートする際はブラウザの互換性に注意してください。

はじめに

./setup/shortcuts.ts を作成して、以下の内容を入力します:

./setup/shortcuts.ts

import type { NavOperations, ShortcutOptions } from '@slidev/types'
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base, // keep the existing shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
  ]
})

セットアップ関数では、ショートカットの新しい配列を返すことでキーボードショートカットをカスタマイズできます。上の例は next 操作を enter にバインドし、prev 操作を backspace にバインドします。

デフォルトのショートカットとナビゲーション操作については、ナビゲーションアクション セクションを参照してください。

キーバインディング形式

各ショートカットの key は文字列 (例: 'Shift+Ctrl+A') または計算型ブール値にすることができます。VueUse の useMagicKeys を参照してください