ショートカットキーを設定できる「vue-global-events」

by kabanoki

HTML

<script src="https://unpkg.com/vue-global-events"></script>
<div id="app">
  <global-events
    @keydown.prevent.ctrl.digit1="minusOne"
    @keydown.prevent.ctrl.digit2="plusOne"
    @keydown.prevent.ctrl.-="minusOne"
    @keydown.prevent.ctrl.+="plusOne"
    @keydown.space.exact="reset"
    @click="plusOne"
    @contextmenu.prevent="minusOne"
  ></global-events>
  <h1>
    {{ counter }}
  </h1>
  <dl>
    <dt>[Ctrl]+[+], [Left Mouse Click], [Ctrl]+[2]</dt>
    <dd>カウンターを増やす</dd>
    <dt>[Ctrl]+[-], [Right Mouse Click], [Ctrl]+[1]</dt>
    <dd>カウンターを減らす</dd>
    <dt>[Space]</dt>
    <dd>カウンターリセット</dd>
  </dl>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

* {
  font-family: sans-serif;
}

dt {
  font-weight: bold;
  font-size: 14px;
}

dd {
  margin: 0 0 10px;
}

JavaScript

Vue.config.keyCodes.digit1 = 49
Vue.config.keyCodes.digit2 = 50

const GlobalEvents = window.VueGlobalEvents;

new Vue({
	el: '#app',
	components: {
  	GlobalEvents: GlobalEvents
  },
  data: {
  	counter: 0
  },
  methods: {
  	plusOne:function() {
    	this.counter++
    },
    minusOne:function() {
    	this.counter--
    },
    reset:function() {
    	this.counter = 0
    }
  }
})