vue-keybindings
v2.0.1
Published
Keyboard Shortcuts registration and Keybindings management
Downloads
202
Maintainers
Readme
Vue-Keybindings
Keyboard Shortcuts registration and Keybindings management
Install
npm install vue-keybindings --save
or
yarn add vue-keybindings
Usage
Configuration
import VueKeybindings from 'vue-keybindings'
Vue.use(VueKeybindings, {
alias: {
cancel: ['esc'],
reload: ['alt', 'f5'],
delete: 'shift+del'
}
})
On Vuejs instance usage
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
this.$options.shortcuts.commandName = () => {
console.log('do some action')
}
Remove existing listener
delete this.$options.shortcuts.commandName;
Dynamic shortcut registration
Create a new keybinding
this.$shortcut.add('command-name', 'ctrl+f6')
// or
this.$shortcut.add('commandName', ['ctrl', 'f6'])
Remove existing keybinding
this.$shortcut.remove('command-name', 'ctrl+f6')
// unbind all actions for this shortcut
this.$shortcut.unbind(['ctrl', 'f6'])
// clear all keybindings
this.$shortcut.clear()
Derived from
- Vivify-Ideas/vue-shortcuts
- MetinSeylan/Vue-Socket.io