ショートカットの設定

v0.20から使用可能です

環境: client

このセットアップ関数はクライアント側でのみ動作します。パッケージのインポート時にはブラウザの互換性を確認してください。

以下の内容で./setup/shortcuts.tsを作成します：

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

export default defineShortcutsSetup((nav: NavOperations) => {
  return [
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
  ]
})

セットアップによって、ナビゲーションで言及されているショートカットに対して、カスタム設定を使用することができます。上記の設定により、次のアニメーションやスライドへの移動はenterに、前のアニメーションやスライドへの移動はbackspaceに割り当てられます。

設定用の関数は、いくつかのナビゲーションメソッドを持つオブジェクトを受け取り、いくつかのショートカット設定を含む配列を返します。詳細については型定義を参照してください。

キーが押されたときのイベントについての詳細は、useMagicKeys | VueUseを参照してください。

# ショートカットの設定

ショートカットの設定