「vue-shortkey」を使ってショートカットキーを実装する

vue-shortkeyとは

「vue-shortkey」は、ショートカットキーを実装するライブラリです。

ショートカットキーによりイベントもしくはフォーカスを設定することができます。

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vue2-animate

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/iFgR/vue-shortkey

導入手順

ショートカットキーを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

Vue.use(require('vue-shortkey'))

（2）WEBページの場合

Vue.use(VueShortkey);

2.ショートカットイベントを設定

methodsにショートカットキーのイベントのtheActionとマルチイベントのtheActionArrowを作成します。

theActionArrowは一つのイベントで複数のショートカットキーを処理します。

 new Vue({
   el: '#app',
   data: {
    name: ''
   },
   methods: {
    theAction: function(){
      alert("['ctrl', 'alt', 'b']");
    },
    theActionArrow:function(event){
      switch (event.srcKey) {
      case 'up':
        alert('up');
        break;
      case 'down':
        alert('down');
        break;
      }
    }
   }
 })

3. テンプレートを準備

イベント、マルチイベント、フォーカスのテンプレートを準備します。

フォーカスを使用するにはv-shortkeyに.focusを使用します。

<div id="app">
    <p>イベント：[ctrl + alt + b]</p>
    <button v-shortkey="['ctrl', 'alt', 'b']" @shortkey="theAction()">Open</button>
    <p>マルチイベント：[arrowup] もしくは [arrowdown]</p>
    <button v-shortkey="{up: ['arrowup'], down: ['arrowdown']}" @shortkey="theActionArrow">Joystick</button>
    <p>フォーカス：[alt + i]</p>
    <input type="text" v-shortkey.focus="['alt', 'i']" v-model="name" />
</div>

サンプル

※JSFiddle越しだと少し動作が不安定です。一度iframe内をクリックすると動作するようです。

>>専用ページで確認する

キーの種類

ショートカットキーは以下のものを使用することができます。

まとめ

ショートカットキーを実装するライブラリでした。

通常のブラウザで利用するには少し面倒ですが、Electoronなどで利用するには便利そうです。

今日はこの辺でー