Vue-ShortKey - 改善用户体验的终极快捷键插件.zip

  [](https://badge.fury.io/js/vue-shortkey) [](https://www.npmjs.com/package/vue-shortkey) [](https://opensource.org/licenses/mit-license.php) Vue3-ShortKey - a fork/port of `vue-shortkey` for VueJS 3.x accepts shortcuts globaly and in a single listener. I'm not vue3 expert, but I edited this plugin until it started working on Vue-cli with Vue 3. ## Install ``` npm install vue3-shortkey --save ``` ## Usage ```javascript Vue.use(require('vue3-shortkey')) ``` Add the shortkey directive to the elements that accept the shortcut. The shortkey must have explicitly which keys will be used. #### Running functions _{The code below ensures that the key combination ctrl + alt + o will perform the 'theAction' method.} ```html <button v-shortkey="['ctrl', 'alt', 'o']" @shortkey="theAction()">Open</button> ``` The function in the modifier __@shortkey__ will be called repeatedly while the key is pressed. To call the function only once, use the __once__ modifier ```html <button v-shortkey.once="['ctrl', 'alt', 'o']" @shortkey="theAction()">Open</button> ``` #### Multi keys ```html <button v-shortkey="{up: ['arrowup'], down: ['arrowdown']}" @shortkey="theAction">Joystick</button> ``` ... and your method will be called with the key in the parameter ```javascript methods: { theAction (event) { switch (event.srcKey) { case 'up': ... break case 'down': ... break ``` #### Setting the focus You can point the focus with the shortcut easily. _{The code below reserves the ALT + I key to set the focus to the input element.} ```html <input type="text" v-shortkey.focus="['alt', 'i']" v-model="name" /> ``` #### Push button Sometimes you may need a shortcut works as a push button. It calls the function one time when you click the button. When you release the shortcut, it calls the same function again like a toggle. In these cases, insert the "push" modifier. The example below shows how to do this ```html <tooltip v-shortkey.push="['f3']" @shortkey="toggleToolTip"></tooltip> ``` #### Using on a component Use the modifier `native` to catch the event. ```html <my-component v-shortkey="['ctrl', 'alt', 'o']" @shortkey.native="theAction()"></my-component> ``` #### Multiple listeners Use the modifier `propagate` to let the event propagate to other listeners ```html <my-component v-shortkey="['ctrl', 'alt', 'o']" @shortkey.propagate="anAction()"></my-component> <my-component v-shortkey="['ctrl', 'alt', 'o']" @shortkey.propagate="aDifferentAction()"></my-component> ``` #### Key list | Key | Shortkey Name | |----------------------------|---------------| | Delete | del | | Backspace | backspace | | Insert | insert | | NumLock | numlock | | CapsLock | capslock | | Pause | pause | | ContextMenu | contextmenu | | ScrollLock | scrolllock | | BrowserHome | browserhome | | MediaSelect | mediaselect | | Shift | shift | | Control | ctrl | | Alt | alt | | Alt Graph | altgraph | | Super (Windows or Mac Cmd) | meta | | Arrow Up | arrowup | | Arrow Down | arrowdown | | Arrow Left | arrowleft | | Arrow Right | arrowright | | Enter | enter | | Escape | esc | | Tab | tab | | Space | space | | Page Up | pageup | | Page Down | pagedown | | Home | home | | End | end | | A - Z | a-z | | 0-9 | 0-9 | | F1-F12 | f1-f12 | You can make any combination of keys as well as reserve a single key. ```html <input type="text" v-shortkey="['q']" @shortkey="foo()"/> <button v-shortkey="['ctrl', 'p']" @shortkey="bar()"></button> <button v-shortkey="['f1']" @shortkey="help()"></button> <textarea v-shortkey="['ctrl', 'v']" @shortkey="dontPaste()"></textarea> ``` #### Avoided fields You can avoid shortcuts within fields if you really need it. This can be done in two ways: * Preventing a given element from executing the shortcut by adding the **v-shortkey.avoid** tag in the body of the element ```html <textarea v-shortkey.avoid></textaea> ``` * Generalizing type of element that will not perform shortcut. To do this, insert a list of elements in the global method. ```javascript Vue.use('vue3-shortkey', { prevent: ['input', 'textarea'] }) ``` * Or even by class ```javascript Vue.use('vue3-shortkey', { prevent: ['.my-class-name', 'textarea.class-of-textarea'] }) ``` #### Other uses With the dynamism offered by Vue, you can easily create shortcuts dynamically ```html <li v-for="(ctx, item) in items"> <a href="https://vuejs.org" target="_blank" v-shortkey="['f' + (item + 1)]" @shortkey="testa(item)" @click="testa()"> F {{ item }} </a> </li> ``` #### Integrating with Nuxt ## Nuxt doesn't support Vue3 yet, use the original package for NuxtJS. Create `/plugins/vue3-shortkey.js` and add the following to it ```javascript import Vue from 'vue' const ShortKey = require('vue-shortkey') // add any custom shortkey config settings here Vue.use(ShortKey, { prevent: ['input', 'textarea'] }) export default ShortKey ``` Load the plugin in `nuxt.config.js`: ```javascript plugins: [ { src: '@/plugins/vue-shortkey.js', mode: 'client' }] ``` The `mode: 'client'` is necessary to prevent Nuxt from loading the plugin during server-side rendering (SSR). ### Unit Test ``` npm test ```