Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lupas/vue-keypress
Global keypress event handler component for Vue.js applications.
https://github.com/lupas/vue-keypress
Last synced: 26 days ago
JSON representation
Global keypress event handler component for Vue.js applications.
- Host: GitHub
- URL: https://github.com/lupas/vue-keypress
- Owner: lupas
- Archived: true
- Created: 2019-11-08T03:19:19.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-23T10:12:29.000Z (over 1 year ago)
- Last Synced: 2024-03-29T13:21:17.217Z (about 2 months ago)
- Language: Vue
- Size: 1.49 MB
- Stars: 60
- Watchers: 4
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Lists
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
- awesome-vue - vue-keypress - Global keypress event handler component for Vue.js applications. (Components & Libraries / UI Utilities)
README
# Vue Keypress
Want to capture _keydown_, _keypress_ and _keyup_ and events globally in Vue? Nothing easier than that.
The Vue Keypress Component let's you do just that.
Just add the component to the view/component that should start a global keypress handler. When the component gets destroyed, the global event handler also gets removed.
# ‼️ Vue 3 Support
This repository is for `vue-keypress` and is not maintained any longer.
If you are using Vue 3, visit the repository [lupas/vue3-keypress](https://github.com/lupas/vue3-keypress)
# How to install?
```bsh
yarn add vue-keypress
// or
npm i vue-keypress
```
# How to use in your project?
Import the component in any .vue file like so:
```js
...
components: {
Keypress: () => import('vue-keypress')
}
...
```
# Simple Usage
```vue
export default {
components: {
Keypress: () => import('vue-keypress')
},
methods: {
someMethod(response) {
// Do something
}
}
}
```
# Props
| Prop | Type | Default | Possible Values | Description |
| ------- | ------ | ------- | --------------------------------- | ------------------------------------------------------------------------- |
| keyEvent | String | 'keyup' | _keydown_, _keypress_, _keyup_ | |
| keyCode | Number | null | [see here](https://keycode.info/) | Key that should trigger the event. If _null_, any key will trigger event. |
| modifiers | Array | [] | ['_ctrlKey_', '_shiftKey_', '_altKey_', '_metaKey_'] | Keys that needs to be pressed down before the actual key (key Code), e.g. Ctrl+A. |
| preventDefault | Boolean | false | _true_,_false_ | Prevent the default action of the event |
| multipleKeys | Array | [] | See example in 'Multiple Keys' | Allows you to define multiple keyCode/modifier combinations per keyEvent. |
> If you use `multipleKeys`, all the other props (except `keyEvent`) become redundant.
# Events
| Event | Description |
| -------- | ---------------------------------------------------- |
| @success | Get's emitted when the defined key/modifiers were pressed. |
| @wrong | Get's emitted when the wrong key(s) or modifier(s) was/were pressed. |
| @any | Get's emitted with any keypress in any case. |
All of them return a payload like so:
```js
{
event: Object, // the official event object
expectedEvent: Object, // your defined props.
message: String // A declarative message on error/success.
}
```
# Multiple Keys
The `multiple-keys` prop allows for defining multiple keys (or key-modifier combinations) per key-event that can be pressed for success.
All the other props except key-event become redundant.
```vue
export default {
components: {
Keypress: () => import('vue-keypress')
},
data: () => ({
multiple: [
{
keyCode: 65, // A
modifiers: ['shiftKey'],
preventDefault: true,
},
{
keyCode: 83, // S
modifiers: ['shiftKey'],
preventDefault: false,
},
],
}),
methods: {
someMethod(response) {
// Do something
}
}
}
```
# Multiple Key Events
Multiple key events means that multiple event handlers for each evennt need to be registered. To do this, simply put your props in an array and register the component multiple times, like so:
```vue
export default {
components: {
Keypress: () => import('vue-keypress'),
},
data() {
return {
keypressEvents: [
{
keyEvent: 'keydown',
multipleKeys: [
{
keyCode: 65, // A
modifiers: ['shiftKey'],
preventDefault: true,
},
{
keyCode: 83, // S
modifiers: ['shiftKey'],
preventDefault: false,
},
],
},
{
keyEvent: 'keyup',
multipleKeys: [
{
keyCode: 65, // A
modifiers: ['shiftKey'],
preventDefault: true,
},
{
keyCode: 83, // S
modifiers: ['shiftKey'],
preventDefault: false,
},
],
},
],
}
},
methods: {
someMethod(response) {
// Do something
}
},
}
```
# Typescript Support
Add the following to your `tsconfig.json`:
```json
"types": [
"vue-keypress"
]
```