A lightweight package simplifies the handling of keyboard shortcuts within Vue applications. No external dependencies
npm install @ramstack/vue-hotkey@ramstack/vue-hotkey is a lightweight package that simplifies the handling of keyboard shortcuts within Vue applications.
Uses @ramstack/hotkey under the hood.
sh
npm install --save @ramstack/vue-hotkey
`$3
html
`$3
html
`Quick start
Specify the hotkey using directive modifiers.
vue
`
The hotkey is case-insensitive. Standard key names are used.
You can find them here Key values for keyboard eventsIn addition, there are also aliases for some key names:
js
const aliases: Record = {
"esc" : "escape",
"ins" : "insert",
"del" : "delete",
"up" : "arrowup",
"down" : "arrowdown",
"right" : "arrowright",
"left" : "arrowleft",
"pgup" : "pageup",
"pgdn" : "pagedown",
"break" : "pause",
"scroll" : "scrolllock",
"scrlk" : "scrolllock",
"prtscr" : "printscreen",
"win" : "meta",
"windows" : "meta",
"cmd" : "meta",
"command" : "meta",
"comma" : ",",
"period" : ".",
"quote" : "\"",
"singlequote" : "'",
"colon" : ":",
"semicolon" : ";",
"plus" : "+",
"minus" : "-",
"tilde" : "~",
"equal" : "=",
"slash" : "/"
};
`$3
To simplify the need to call or event.stopPropagation() inside event handlers,
the vHotkey directive provides appropriate event modifiers.
* .stop
*
*
*
*
* vue
`$3
You can define multiple hotkeys for a single action if you need to. In the example, a single action is triggered
for both and Shift + S. To determine which of hotkeys triggered the event, access the hotkey property,
which contains the string representation of the hotkey.
`vue
`$3
Use the or document modifiers to listen for events globally at the page level.`vue
`$3
To specify the event name to be listened for, use the argument directive.
The default event is .
`vue
`$3
If you wish to prevent hotkey handling on certain elements, add the attribute to the respective element.
`html
...
`Alternatively, apply it to the parent if you want to exclude an entire group of elements at once.
html
...
``