Dafrok / V Hotkey
Licence: mit
Vue 2.x directive for binding hotkeys to components.
Stars: ✭ 606
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to V Hotkey
vue2-shortcut
Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.
Stars: ✭ 38 (-93.73%)
Mutual labels: hotkey
angular2-focus
Angular attribute directive that gives focus on an element depending on a given expression 🔎
Stars: ✭ 21 (-96.53%)
Mutual labels: directive
V Track
🕹 A manual tracking decoupling plugin based on Vue directive / 一个基于Vue指令实现的埋点解耦插件~
Stars: ✭ 277 (-54.29%)
Mutual labels: directive
Angular Tutorial
🐰Some of the angular tutorial - 《Angular学习笔记》
Stars: ✭ 342 (-43.56%)
Mutual labels: directive
angular2-stretchy
angular2-stretchy is an Angular2 directive that automatically adjusts input width to fit content.
Stars: ✭ 12 (-98.02%)
Mutual labels: directive
Hotkeys
➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
Stars: ✭ 5,165 (+752.31%)
Mutual labels: hotkey
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (-52.81%)
Mutual labels: directive
Rbtray
A fork of RBTray from http://sourceforge.net/p/rbtray/code/.
Stars: ✭ 365 (-39.77%)
Mutual labels: hotkey
Angular Tooltips
Angularjs tooltips module, add tooltips to your elements - https://720kb.github.io/angular-tooltips
Stars: ✭ 357 (-41.09%)
Mutual labels: directive
ngx-ionic-image-viewer
An Ionic 4 Angular component to view & zoom on images and photos without any additional dependencies.
Stars: ✭ 129 (-78.71%)
Mutual labels: directive
Angular Datepicker
Angularjs datepicker module, generate a datepicker on your input element - https://720kb.github.io/angular-datepicker
Stars: ✭ 486 (-19.8%)
Mutual labels: directive
react-hotkey-tooltip
A global Hotkey provider with built in tooltip for React
Stars: ✭ 34 (-94.39%)
Mutual labels: hotkey
Keyboardshortcuts
Add user-customizable global keyboard shortcuts to your macOS app in minutes
Stars: ✭ 500 (-17.49%)
Mutual labels: hotkey
v-hotkey
Vue 2.x directive for binding hotkeys to components.
Play with me
https://dafrok.github.io/v-hotkey
Install
$ npm i v-hotkey
# or
$ yarn add v-hotkey
Usage
import Vue from 'vue'
import VueHotkey from 'v-hotkey'
Vue.use(VueHotkey)
<template>
<span v-hotkey="keymap" v-show="show">
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
</span>
</template>
<script>
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
}
}
}
}
}
</script>
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.
<template>
<span v-hotkey.prevent="keymap" v-show="show">
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
</span>
</template>
stop
Add the stop modifier to the directive to stop event propagation.
<template>
<div v-hotkey.stop="keymap">
<span> Enter characters in editable areas doesn't trigger any hotkeys. </span>
<input>
</div>
</template>
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
import Vue from 'vue'
import VueHotkey from 'v-hotkey'
Vue.use(VueHotkey, {
'①': 49 // the key code of character '1'
})
Template
<span v-hotkey="keymap"></span>
<script>
export default {
foo () {
console.log('Hooray!')
},
computed: {
keymap () {
return {
'①': foo
}
}
}
}
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].