Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Dafrok/v-hotkey
Vue 2.x directive for binding hotkeys to components.
https://github.com/Dafrok/v-hotkey
directive hotkey vue
Last synced: 9 days ago
JSON representation
Vue 2.x directive for binding hotkeys to components.
- Host: GitHub
- URL: https://github.com/Dafrok/v-hotkey
- Owner: Dafrok
- License: mit
- Created: 2017-03-16T04:12:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-20T13:49:03.000Z (over 1 year ago)
- Last Synced: 2024-07-29T04:57:08.094Z (4 months ago)
- Topics: directive, hotkey, vue
- Language: JavaScript
- Homepage: https://dafrok.github.io/v-hotkey
- Size: 3.41 MB
- Stars: 722
- Watchers: 10
- Forks: 74
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# v-hotkey
[](https://bundlephobia.com/result?p=v-hotkey)
[](https://npm.im/v-hotkey)
[](https://github.com/dafrok/v-hotkey/blob/master/LICENSE)
[](https://standardjs.com)
Vue 2.x directive for binding hotkeys to components.
## Play with me
[https://dafrok.github.io/v-hotkey](https://dafrok.github.io/v-hotkey)
## Install
```bash
$ npm i v-hotkey
# or
$ yarn add v-hotkey
```
## Usage
```javascript
import Vue from 'vue'
import VueHotkey from 'v-hotkey'
Vue.use(VueHotkey)
```
```vue
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
export default {
data () {
return {
show: true
}
},
methods: {
toggle () {
this.show = !this.show
},
show () {
this.show = true
},
hide () {
this.show = false
}
},
computed: {
keymap () {
return {
// 'esc+ctrl' is OK.
'ctrl+esc': this.toggle,
'enter': {
keydown: this.hide,
keyup: this.show
}
}
}
}
}
```
## Event Handler
- keydown (as default)
- keyup
## Key Combination
Use one or more of following keys to fire your hotkeys.
- ctrl
- alt
- shift
- command (MacOS)
- windows (Windows)
## Modifiers
### prevent
Add the prevent modifier to the directive to prevent default browser behavior.
```vue
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
```
### stop
Add the stop modifier to the directive to stop event propagation.
```vue
Enter characters in editable areas doesn't trigger any hotkeys.
```
## Key Code Alias
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**.
### Definition
```javascript
import Vue from 'vue'
import VueHotkey from 'v-hotkey'
Vue.use(VueHotkey, {
'①': 49 // the key code of character '1'
})
```
### Template
```vue
export default {
foo () {
console.log('Hooray!')
},
computed: {
keymap () {
return {
'①': foo
}
}
}
}
```