vue快速复制快捷键_⌨️ Vue项目给应用优雅的绑定快捷键

想必各位前端看官也一定做过这样的需求，给我们的应用某些主要的功能绑定一个快捷键。尤其是工具类的产品，让用户可以使用快捷键操作，能大大提高工具使用效率。

如何绑定快捷键

聪明的你也想到了，Vue 官方文档自有解释：按键修饰符

但是实际实践过的你也可能知道，这种绑定按键事件的方式都是绑定在了当前 ViewModel 上的。也就是模版字符串 template 中，这样就无法自定义一个时机在 JavaScript 中自由调用。不过这样做也有好处，比如当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

这里使用第三方插件 keymaster 来做按键绑定，编程式绑定任意按键。

使用插件

安装npm i keymaster -S

or

yarn add keymaster -S

使用import key from 'keymaster'

// 给按键 A 绑定快捷键

key('a', function(){ alert('you pressed a!') });

// 回调函数返回 false 以阻止浏览器默认事件行为

key('ctrl+r', function(){ alert('stopped reload!'); return false });

// 绑定多个快捷键，做同一件事

key('⌘+r, ctrl+r', function(){ });

定制插件

如果一个函数被使用超过3次以上，我习惯封装一个通用函数，不如直接写成 Vue 中的 plugin 好了。