Vue ShortKey plugin add shortcuts globally
The Vue-ShortKey Plugin offers easy implementation of keyboard shortcuts to fire any events even with large combinations of keys and providing modifiers.
- Setting the focus
- Using in a component
- Avoided fields
- and other uses
Take a look at the example below.
To start working with the Vue-ShortKey Plugin use the following command to install it.
$ yarn add vue-shortkey
The code below ensures that the key combination ctrl + alt + o will perform the 'dialog' method.
<button v-shortkey="['ctrl', 'alt', 'o']" @shortkey="dialog()">Open modal by pressing ctrl+alt+o</button>
The above example has a flaw, the function in the modifier
@shortkey will be called repeatedly while the key is pressed.
You wouldn't want this to happen:
To call the function only once, use the
<button v-shortkey.once="['f4']" @shortkey="dialog()">Open modal by pressing F4</button>
You can also point the focus to let's say an input, using the
focus modifier. When using on a component, use the modifier
.native to catch the events.
For all the available shortcuts and their combinations check the Key list.
More options are available here, like avoiding shortcuts within fields & other uses. That's it!