Az-keyboard-man-vue

A simple keyboard event listener for Vue

Usage

Modifiers

ctrl/shift/meta/alt

import AzKeyboardMan from 'az-keyboard-man-vue'
Vue.use(AzKeyboardMan)

export default {
  created() {
    this.$onKeydown(this.handleKeydown, 'KEY_F1') // use with keyName, you can find all keyNames in /src/keyCode.js
    this.$onKeydown(this.handleKeydown, 112, {}, 1, 2) // use with keyCode and two parameters are passed to the function
    this.$onKeydown(this.handleKeydown, 'KEY_F2', {
      modifiers: 'ctrl', // ['ctrl','shift','meta','alt'], default:''
      delay: 1000, // default:500
      delayType: 'debounce', // ['throttle','debounce',null], default:'throttle'
      immediate: false, // default:true
      // el: this.$el // A html element
    })

    this.$onKeyup(this.handleKeyup, 'KEY_F1')
    this.$onKeyup(this.handleKeyup, 112)
    this.$onKeyup(this.handleKeyup, 'KEY_F2', {
      modifiers: 'ctrl,shift',
    })

    var i = this.$onKeyup(this.handleKeyup, 'KEY_F2')
    this.$onKeyRemove(i) // remove this listener
  },
  methods: {
    handleKeydown(e, a, b) {
      console.log('down')
      console.log(e, a, b)
    },
    handleKeyup(e) {
      console.log('up')
      console.log(e)
    },
  },
}

Installation

npm install az-keyboard-man-vue

or

yarn add az-keyboard-man-vue