Vue　vue-shortkey

by kabanoki

HTML

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

CSS

#app {
    padding: 20px;
  }
  p {
    margin-bottom:0px;
    font-weight: 800;
  }

Vue

Vue.use(VueShortkey);
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;
      }
    }
   }
 })