vue项目绑定快捷键

为什么要绑定快捷键呢？？？
因为某个页面使用某个功能较多，鼠标点击不方便，所以用快捷键来改善用户体验
为了防止按下快捷键触发多次的情况，需要将keydown和keyup都绑定

1.设置一个全局的变量：

data(){
  return{
    triggerFlag:false
  }
}

2.在methods里面写入两个新的函数 handleKeyDown和handleKeyUp

methods:{
    handleKeyDown(e) {
      let that = this
      if (that.arrKey.length > 0) {
        // a-z的按键 长按去重
        if (that.arrKey.indexOf(e.key.toLowerCase()) >= 0) {
          return
        }
      }
      that.arrKey.push(e.key.toLowerCase())
      this.keydown = that.arrKey.join('+')
      // 监听按键捕获
      if (this.keydown == 'shift+s') {
        if (that.forbidKeyboard) {
          e.preventDefault()
          return
        }
        this.keydown = ''
        //在这里面写你要用快捷键做的事情
        //that.deleteAll()

        e.preventDefault()//取消浏览器原有的操作
      }
    },
    handleKeyUp(e) {
      this.arrKey.splice(this.arrKey.indexOf(e.key.toLowerCase()), 1)
      this.keydown = this.arrKey.join('+')
      e.preventDefault()
    },
},

3.在created周期中用EventListener监听事件keydown和keyup

 created() {
    document.addEventListener('keydown', this.handleKeyDown)
    document.addEventListener('keyup', this.handleKeyUp)
  },

4.一定要记得在离开页面时在destroyed周期中销毁用EventListener监听的keydown和keyup两个事件，否则快捷键会一直绑定。
销毁！！！（切记：一定要销毁！！！）

  destroyed() {
    document.removeEventListener('keydown', this.handleKeyDown)
    document.removeEventListener('keyup', this.handleKeyUp)
  }