vue-global-events Demo

Simple demo with a counter binding multiple keys to increment, decrement and reset

by Eduardo San Martin Morote

HTML

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-global-events@2"></script>


<div id="app">
  <global-events
    @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++ (plus sign), Left Mouse Click, Ctrl+2</dt>
    <dd>Increase counter</dd>
    <dt>Ctrl+- (minus sign), Right Mouse Click, Ctrl+1</dt>
    <dd>Increase counter</dd>
    <dt>Space only (no control, alt, etc)</dt>
    <dd>Reset counter</dd>
  </dl>
</div>

CSS

* {
  font-family: sans-serif;
}

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

dd {
  margin: 0 0 10px;
}

JavaScript

// Define custom keyCodes for digits 1 and 2 as it's not possible to
// write @keydown.1 because it will be considered as a keyCode
// instead of the actual character 1
// Vue.config.keyCodes.digit1 = 49
// Vue.config.keyCodes.digit2 = 50

const { createApp } = Vue

createApp({
	el: '#app',
	components: {
  	GlobalEvents: VueGlobalEvents.GlobalEvents
  },
  data: () => ({
  	counter: 0
  }),
  methods: {
  	plusOne () {
    	this.counter++
    },
    minusOne () {
    	this.counter--
    },
    reset () {
    	this.counter = 0
    }
  }
}).mount('#app')