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; //键盘码值 keycode
      if (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; //键盘码值 keycode
      console.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; //键盘码值 keycode
      if (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.js

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

结束~