主要还是通过Mousetrap.bind来绑定,先了解一下基础用法
Mousetrap.bind
单个绑定:
Mousetrap.bind('/', _focusSearch);
多个绑定:
Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {
_saveDraft(); });
自定义动态绑定
先将快捷键和对应的方法需要参数存入一个Map中,Key为快捷键,Value为所需参数
vue的js代码块,mounted()方法块中,定义方法:
let _this = this;
document.onkeydown = function (e) {
let key = window.event.keyCode;
window.event.preventDefault() //关闭浏览器默认快捷键
// 是否存在快捷键map中,是则绑定
if(_this.keyboardMap.get(e.key)!=null && typeof _this.keyboardMap.get(e.key) != "undefined"){
Mousetrap.bind(e.key,_this.marksKeyboard(_this.keyboardMap.get(e.key)))
}
};
以上