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

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const VueHotkey = window.VueHotkey;

Vue.use(VueHotkey);

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


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