想必各位前端看官也一定做过这样的需求,给我们的应用某些主要的功能绑定一个快捷键。尤其是工具类的产品,让用户可以使用快捷键操作,能大大提高工具使用效率。
如何绑定快捷键
聪明的你也想到了,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 好了。
// @/plugins/shortcut.js
import Vue from 'vue'
import keymaster from 'keymaster'
const bindKeyHandler = fn => {
return () => {
fn()
return false
}
}
export const shortcut = {
bind: (seed, func) => keymaster(seed, bindKeyHandler(func)),
...keymaster
}
Vue.prototype.$shortcut = shortcut
插件为 Vue.prototype
添加了全局方法 $shortcut,shortcut 扩展了 keymaster
“遗散多年”的 bind
方法(绑定按键事件),我猜 keymaster 没有提供 bind API,可能是因为 bind() 是 JavaScript 内置的方法。为了避免命名冲突或者语法歧义。
绑定事件
? 举个例子:给应用添加保存功能,那快捷键一定是 ⌘ / Ctrl
+ S
啦