A plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.
npm install vue-shortkey!CircleCI status
Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.
npm install vue-shortkey --save
Usage
javascript
Vue.use(require('vue-shortkey'))
`
Add the shortkey directive to the elements that accept the shortcut.
The shortkey must have explicitly which keys will be used.#### Running functions
The code below ensures that the key combination ctrl + alt + o will perform the 'theAction' method.
html
`
The function in the modifier __@shortkey__ will be called repeatedly while the key is pressed. To call the function only once, use the __once__ modifier
html
`
#### Multi keys
html
`
... and your method will be called with the key in the parameter
javascript
methods: {
theAction (event) {
switch (event.srcKey) {
case 'up':
...
break
case 'down':
...
break
`#### Setting the focus
You can point the focus with the shortcut easily.
The code below reserves the ALT + I key to set the focus to the input element.
html
`#### Push button
Sometimes you may need a shortcut works as a push button. It calls the function one time until you release the shortcut. When you release the shortcut, it call the same function again like a toggle. In these cases, insert the "push" modifier.
The example below shows how to do this
html
`#### Using on a component
Use the modifier
to catch the event.
`html
`#### Key list
| Key | Shortkey Name |
|----------------------------|---------------|
| Delete | del |
| Backspace | backspace |
| Insert | insert |
| NumLock | numlock |
| CapsLock | capslock |
| Pause | pause |
| ContextMenu | contextmenu |
| ScrollLock | scrolllock |
| BrowserHome | browserhome |
| MediaSelect | mediaselect |
| Shift | shift |
| Control | ctrl |
| Alt | alt |
| Alt Graph | altgraph |
| Super (Windows or Mac Cmd) | meta |
| Arrow Up | arrowup |
| Arrow Down | arrowdown |
| Arrow Left | arrowleft |
| Arrow Right | arrowright |
| Enter | enter |
| Escape | esc |
| Tab | tab |
| Space | space |
| Page Up | pageup |
| Page Down | pagedown |
| Home | home |
| End | end |
| A - Z | a-z |
| 0-9 | 0-9 |
| F1-F12 | f1-f12 |
You can make any combination of keys as well as reserve a single key.
html
`#### Avoided fields
You can avoid shortcuts within fields if you really need it. This can be done in two ways:
* Preventing a given element from executing the shortcut by adding the v-shortkey.avoid tag in the body of the element
html