Vue 3.2.x directive for binding hotkeys to components.
npm install v-hotkey3Vue 3.2.x directive for binding hotkeys to components.
Though not a fork, this package is a direct copy of v-hotkey made to work with Vue 3 (until this PR probably gets merged).
``bash`
pnpm add v-hotkey3
`ts
import { createApp } from 'vue'
import HotkeyPlugin from 'v-hotkey3'
const app = createApp(App)
app.use(HotkeyPlugin)
`
`vue
Press ctrl + esc to toggle me! Hold enter to hide me!
`
`vue
Press ctrl + esc to toggle me! Hold enter to hide me!
`
- keydown (as default)
- keyup
Use one or more of following keys to fire your hotkeys.
- ctrl
- alt
- shift
- command (MacOS)
- windows (Windows)
Add the prevent modifier to the directive to prevent default browser behavior.
`vuectrl + esc
Press to toggle me! Hold enter to hide me!`
Add the stop modifier to the directive to stop event propagation.
`vue`
Enter characters in editable areas doesn't trigger any hotkeys.
The default key code map is based on US standard keyboard.
This ability to provide their own key code alias for developers who using keyboards with different layouts. The alias name must be a single character.
`ts
import { createApp } from 'vue'
import HotkeyPlugin from 'v-hotkey3'
const app = createApp(App)
app.use(HotkeyPlugin, {
'①': 49 // the key code of character '1'
})
`
`vue
``
MIT