Keyboard Shortcuts registration and Keybindings management
npm install vue-keybindings
!VueJS v3 compatible
Keyboard Shortcuts registration and Keybindings management
`` bash`
npm install vue-keybindings --save
or
` bash`
yarn add vue-keybindings
js
import VueKeybindings from 'vue-keybindings'Vue.use(VueKeybindings, {
alias: {
cancel: ['esc'],
reload: ['alt', 'f5'],
delete: 'shift+del'
}
})
`#### On Vuejs instance usage
` js
var vm = new Vue({
shortcuts: {
keydown: function (event) {
console.log('key ', event, 'pressed')
return false // stop alias calling
},
cancel: function () {
console.log('escape key pressed')
return false // stop propagation
},
customBinding: function (data) {
console.log('this method was fired by some call to: vm.$shortcut.emit("customBinding", data)')
}
},
methods: {
clickButton: function (val) {
this.$shortcut.emit('customBinding', val)
}
}
})
`#### Dynamic shortcut event listeners
Create a new listener
` js
this.$options.shortcuts.commandName = () => {
console.log('do some action')
}
`
Remove existing listener
` js
delete this.$options.shortcuts.commandName;
`#### Dynamic shortcut registration
Create a new keybinding
` js
this.$shortcut.add('command-name', 'ctrl+f6')
// or
this.$shortcut.add('commandName', ['ctrl', 'f6'])
`
Remove existing keybinding
` js
this.$shortcut.remove('command-name', 'ctrl+f6')
// unbind all actions for this shortcut
this.$shortcut.unbind(['ctrl', 'f6'])
// clear all keybindings
this.$shortcut.clear()
``