ホットキーのバインドを「v-hotkey」で実装する

v-hotkeyとは

v-hotkeyは、ホットキーをバインドするVue.js製のコンポーネントライブラリです。

[enter] や [ctra+a] などのキーボードを押した時にイベントを起動させることができます。

デフォルトのキーコードマップは、米国の標準キーボードに基づいています。
異なるレイアウトのキーボードを使用する開発者には、独自のキーコードエイリアスを提供します。
エイリアス名は単一の文字でなければなりません。

インストール

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

npm

npm i --save v-hotkey

CDN

<script src="https://cdn.jsdelivr.net/npm/v-hotkey@0.6.0/index.min.js"></script>

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

https://github.com/Dafrok/v-hotkey

導入手順

ホットキーをバインドします。

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

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

import VueHotkey from 'v-hotkey'

（2）WEBページの場合

const VueHotkey = window.VueHotkey;

2.メソッドを設定

Vue.use(VueHotkey);

Vue.component('hotkey', {
  template: '#hotkey',
  data() {
    return {
      show: true,
      text: '[enter]を押すと消えて、離すと表示されます。[ctrl+a]を押すとこのテキストが倍になります。',
    }
  },
  methods: {
    doToggle:function () {
      this.show = !this.show
    },
    doShow:function () {
      this.show = true
    },
    doHide:function () {
      this.show = false
    },
    addList: function() {
      this.text = this.text + this.text;
    }
  },
  computed: {
    keymap: function() {
      return {
        'ctrl+esc': this.doToggle,
        'enter': {
          keydown: this.doHide,
          keyup: this.doShow
        },
        'ctrl+a': this.addList
      }
    }
  }
});

let app = new Vue({
  el: '#app',
});

3. テンプレートを準備

管理人のやり方が悪いのかHTMLに直記載のだと動作しませんでした。
コンポーネントを利用する場合は、大丈夫みたいです。

<div id="app">
    <script type="text/x-template" id="hotkey">
    <span v-hotkey.prevent.stop="keymap" 
          v-show="show"
          v-text="text"></span>
    </script>
    <hotkey></hotkey>
</div>

サンプル

※iframeをクリックしないと動作しません。

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

さいごに

ホットキーをバインドするVue.js製のコンポーネントライブラリでした。
ブラウザやOSによってバインドできないキーもありますが（[ctrl+esc]など）、色んな可能性を感じるライブラリです。
ぜひ試してみてください。

今日はこの辺でー