Graxi / vue2-shortcut

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.