适用于Vue.js的Vue ShortKey插件

Vue快捷键 (Vue ShortKey)

Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

Vue-ShortKey-VueJS 2.x的插件在单个侦听器中全局接受快捷方式。

安装 (Install)

npm install vue-shortkey --save

用法 (Usage)

Vue.use(require('vue-shortkey'))

Add the shortkey directive to the elements that accept the shortcut. The shortkey must have explicitly which keys will be used.

将shortkey指令添加到接受快捷方式的元素中。 快捷键必须明确使用哪个键。

运行功能 (Running functions)

_{The code below ensures that the key combination ctrl + alt + o will perform the 'theAction' method.}

_{下面的代码确保组合键ctrl + alt + o将执行'theAction'方法。}

<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

按下该键时，会反复调用修饰符@shortkey中的函数。 要只调用一次函数，请使用一次修饰符

<button v-shortkey.once="['ctrl', 'alt', 'o']" @shortkey="theAction()">Open</button>

设定焦点 (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.}

您可以使用快捷方式轻松对准焦点。 _{下面的代码保留ALT + I键可将焦点设置到输入元素。}

<input type="text" v-shortkey.focus="['alt', 'i']" v-model="name" />

按钮 (Push button)

Sometimes you may need a shortcut works as a push button. In these cases, insert the "push" modifier

有时您可能需要快捷方式作为按钮。 在这种情况下，插入“推”修饰符

The example below shows how to do this

以下示例显示了如何执行此操作

<tooltip v-shortkey.push="['f3']" @shortkey="toggleToolTip"></tooltip>

You can make any combination of keys as well as reserve a single key.

您可以进行键的任意组合，也可以保留一个键。

<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

  通过在元素主体中添加v-shortkey.avoid标记来阻止给定元素执行快捷方式

<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.

  不会执行快捷方式的元素的通用类型。 为此，请在全局方法中插入元素列表。

Vue.use('vue-shortkey', { prevent: ['input', 'textarea'] })

• Or even by class

  甚至按班级

Vue.use('vue-shortkey', { prevent: ['.my-class-name', 'textarea.class-of-textarea'] })

其他用途 (Other uses)

With the dynamism offered by Vue, you can easily create shortcuts dynamically

借助Vue提供的动态性，您可以轻松地动态创建快捷方式

<li v-for="(ctx, item) in itens">
  <a
    href="https://vuejs.org"
    target="_blank"
    v-shortkey="['f' + (item + 1)]"
    @shortkey="testa(item)"
    @click="testa()">
      F {{ item }}
  </a>
</li>

单元测试 (Unit Test)

npm test

翻译自: https://vuejsexamples.com/vue-shortkey-plugin-for-vue-js/