快捷键实践bug记录

本次需求是左右切换增加快捷键功能，原本以为只要监听快捷键，copy上对应的方法就可以了，没想到踩雷了，记录下bug。

1.键盘事件会多次触发，需要在页面销毁阶段，移除事件。

2.键盘操作过快，导致接口反应不来，使部分数据缺失，需要加上防抖节流方法。

3.如果页面有类似switch radio组件，这类组件如果引用的ui库设计的不行，点击的时候不失焦，在按下键盘快捷键时，会偶尔造成一个误点击的效果，需要在这类组件上面加上 @mouseup="$event.target.blur()"设置组件点击之后失焦。

加上防抖之后，事件移除失败，所以最简单的方法就是将keydown事件改为keyup事件，不加上防抖方法

// 页面初始化
created() {
  // 注册键盘监听事件，其移除在destroyed阶段
  window.addEventListener('keydown', debounce(this.onKeyCombo, 150));
}

// 页面销毁
destroyed() {
  // 移除键盘监听事件，否则每次created时注册一个监听事件，会执行多次
  window.removeEventListener('keydown', this.onKeyCombo);
}

<v-switch
  v-model="controller.checkSwitch"
  @mouseup="$event.target.blur()"
></v-switch>

// 防抖
export function debounce(fn: any, duration = 100) {
  let timer: any = null;
  return (...arg: any) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...arg);
    }, duration);
  };
}