vue自定义热键、自定义快捷键组合，vue阻止默认事件

需求：

思路：

1、通过监听window.addEventListener，键盘事件KeyDown，获取按下的键的keyCode

2、按下什么键就把什么键的keyCode存起来，当存起来的keyCode符合你自定义的热键组合时，就触发自定义方法

注意：

window.addEventListener监听事件当按下键盘某键后，会一直触发直到抬起keyup后

window.addEventListener监听事件需要手动销毁

比对存起来的keyCode是否符合自定义热键时，要注意热键的顺序（例：ctrl + S，反过来S+ctrl是不需要触发的）

某些自定义快捷键组合可能会与浏览器的默认快捷键冲突，需要先阻止浏览器默认事件

代码：

  data() {return {key: [],timer: null,dataList: [{list: [17, 187],msg: "ctrl +",},{list: [17, 107],msg: "ctrl +",},{list: [17, 83],msg: "ctrl S",},{list: [17, 85],msg: "ctrl U",},{list: [17, 82],msg: "ctrl R",},{list: [17, 75],msg: "ctrl K",},{list: [17, 13],msg: "ctrl Enter",},{list: [17, 90],msg: "ctrl Z",},{list: [16, 38],msg: "shift 上",},{list: [16, 40],msg: "shift 下",},{list: [13],msg: "Enter",},],};},

mounted() {//开启监听window.addEventListener("keydown", this.KeyDown);window.addEventListener("keyup", this.keyup);
},beforeDestroy(){//手动销毁监听window.removeEventListener("keydown", this.KeyDown);window.removeEventListener("keyup", this.keyup);},methods: {//键盘抬起keyup(event) {const e = event || window.event || arguments.callee.caller.arguments[0];let key = e.keyCode; //键盘码值 keycodeif (this.key.indexOf(key) !== -1) {this.key.splice(this.key.indexOf(key), 1);this.timer = null;clearTimeout(this.timer)}},//键盘按下KeyDown(event) {const e = event || window.event || arguments.callee.caller.arguments[0];let key = e.keyCode; //键盘码值 keycodeconsole.log("key", key);if (!this.key.includes(key)) {this.key.push(key);}this.handleClick();//阻止浏览器默认事件event.preventDefault();},//按下的组合键是否是组合热键集中的热键handleClick() {this.dataList.forEach((item) => {if (this.checkValue(item.list.length, this.key, item.list)) {if (this.timer !== null) {return;}// 执行方法console.log(item.msg);//防止多次触发this.timer = setTimeout(() => {this.timer = null;}, 5000);}});},//匹配热键对应规则数据//num：需要匹配组合热键的个数//list：热键组合的集合//当前需要匹配的热键checkValue(num, list, list2) {for (let i = 0; i < num; i++) {if (list[i] !== list2[i]) {return false;}if(i+1==num){return true;}}},}

 建议：作为mixins使用

mixins完整代码：

export const myMixin = {data() {return {downKeyList: [],timer: null,dataList: [{list: [17, 187],msg: "ctrl +",},{list: [17, 107],msg: "ctrl +",},{list: [17, 83],msg: "ctrl S",},...此处省略...]};},methods: {// 键盘抬起keyup(event) {const e = event || window.event || arguments.callee.caller.arguments[0];let key = e.keyCode; //键盘码值 keycodeif (this.downKeyList.indexOf(key) !== -1) {this.downKeyList.splice(this.downKeyList.indexOf(key), 1);this.timer = null;clearTimeout(this.timer);}}, // 键盘按下keyDown(event, func) {const e = event || window.event || arguments.callee.caller.arguments[0];let key = e.keyCode; //键盘码值 keycode // console.log('key', key)if (!this.downKeyList.includes(key)) {this.downKeyList.push(key);}event.preventDefault();this.downKeyHandle().then((res) => {// 符合热键组合,执行自定义函数// 执行方法func(res);});}, // 按下的组合键是否是组合热键集中的热键downKeyHandle() {return new Promise((resolve) => {this.dataList.forEach((item) => {if (this.checkValue(item.list.length, this.downKeyList, item.list)) {if (this.timer !== null) {return;} // 防止多次触发this.timer = setTimeout(() => {this.timer = null;}, 5000); resolve(item.msg);}});});}, // 匹配热键对应规则数据 // num：需要匹配组合热键的个数 // list：热键组合的集合 // list：当前需要匹配的热键checkValue(num, list, list2) {for (let i = 0; i < num; i++) {if (list[i] !== list2[i]) {return false;}if (i + 1 == num) {return true;}}},},
};

全局引入：

main.jsimport {myMixin} from '@src/mixins/index'Vue.mixin(myMixin)

在页面中使用：

mounted(){//addEventListener函数第二个参数，是操作函数，仅允许一个参数event//通过一个自定义的函数，去调用mymixin中的keyDown函数，同时传入一个自定义函数window.addEventListener('keydown', this.myFunction)window.addEventListener('keyup', this.keyup)
}beforeDestroy(){//手动销毁window.removeEventListener('keydown', this.myFunction)window.removeEventListener('keyup', this.keyup)
}methods：{myFunction(event) {this.keyDown(event, res => {//处理函数console.log(res)})}
}

 有些是不生效的，比如ctrl + W、ctrl + Y、ctrl + T、ctrl + N...

结束~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！