vue2-shortcut

Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.

Install

$ npm install --save vue2-shortcut

Usage

import Vue from 'vue';
import vShortcut from 'vue2-shortcut';
Vue.use(vShortcut);

Optional global config

You can define excludeTags or customized preventWhen function globally to prevent shortcuts from being executed

• excludeTags: a list of html tags where shortcuts should not be triggered
• preventWhen: a global interceptor function which returns true

  Vue.use(vShortcut, {
    excludeTags: ['input', 'textarea'],
    preventWhen: (e) => true // prevents all shortcuts
  })

Check the demo here

Define scopes for shortcuts

By default, the shorcuts will work globally. Optionally, if you want to restrict shorcuts within certain scopes, it's also easy to define a scope in vue template like this:

  <div v-shortcut-scope="'a'">
    Component A
  </div>

Then you could pass ['a'] as value for the scope property when creating shortcuts. In this way, shorcuts are triggered only when you are currently interacting with Component A

Register shortcuts

Register your shortcuts in any vue template under the mounted hook

  mounted() {
    Vue.createShortcuts(this, [
      {
        keys: ['ctrl', 'c'],
        scope: ['a'], // optional
        eventHandler: () => {
          console.log('pressing ctrl and c in scope a');
          console.log('executed once');
        },
        once: true, // optional, false by default
        unordered: true // optional, false by default
      }
    ])
  }

Deregister shortcuts

When the template is destroyed, shortcuts registered in that template will be removed automatically

Key List

Below is the list of keys mapping. Use ctrl if you want a shortcut to work with meta on mac and control on windows.

| Keyboard | shortcut key | | ------------ | ------------ | | A - Z | a - z | | 0 - 9 | 0 - 9 | | F1 - F12 | f1 - f12 | | Escape | esc | | Backquote | backquote | | Minus | minus | | Equal | equal | | Backspace | del | | Tab | tab | | CapsLock | capslock | | Space | space | | Pause | pause | | Delete | del | | ContextMenu | contextmenu | | BracketLeft | bracketleft | | BracketRight | bracketright | | Backslash | backslash | | Semicolon | semicolon | | Quote | quote | | Enter | enter | | Comma | comma | | Period | period | | Slash | slash | | ArrowLeft | arrowleft | | ArrowUp | arrowup | | ArrowRight | arrowright | | ArrowDown | arrowdown | | Control | control | | Shift | shift | | Alt | alt | | Meta | meta |