Skip to content
Vue 2.x directive for binding hotkeys to components.
JavaScript Vue
Branch: master
Clone or download
Latest commit 9ed993a Oct 12, 2019

README.md

v-hotkey

bundlephobia minified size npm package version github license js standard style

Vue 2.x directive for binding hotkeys to components.

Play with me

https://dafrok.github.io/v-hotkey

Install

$ npm i --save v-hotkey

Usage

import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey)
<template>
  <span v-hotkey="keymap" v-show="show"> Press `ctrl + esc` to toggle me! Hold `enter` to hide me! </span>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    show () {
      this.show = true
    },
    hide () {
      this.show = false
    }
  },
  computed: {
    keymap () {
      return {
        // 'esc+ctrl' is OK.
        'ctrl+esc': this.toggle,
        'enter': {
          keydown: this.hide,
          keyup: this.show
        }
      }
    }
  }
}
</script>

Event Handler

  • keydown (as default)
  • keyup

Key Combination

Use one or more of following keys to fire your hotkeys.

  • ctrl
  • alt
  • shift
  • meta (windows / command)

Modifiers

prevent

Add the prevent modifier to the directive to prevent default browser behavior.

<template>
  <span v-hotkey.prevent="keymap" v-show="show"> Press `ctrl + esc` to toggle me! Hold `enter` to hide me! </span>
</template>

stop

Add the stop modifier to the directive to stop event propagation.

<template>
  <div v-hotkey.stop="keymap">
    <span> Enter characters in editable areas doesn't trigger any hotkeys. </span>
    <input>
  </div>
</template>

Key Code Alias

The default key code map is based on US standard keyboard. This ability to provide their own key code alias for developers who using keyboards with different layouts. The alias name must be a single character.

Definition

import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey, {
  '': 49 // the key code of character '1'
})

Template

<span v-hotkey="keymap"></span>
<script>
export default {
  foo () {
    console.log('Hooray!')
  },
  computed: {
    keymap () {
      return {
        '': foo
      }
    }
  }
}
</script>
You can’t perform that action at this time.