vue如何监听键盘事件

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

v-on:keyup.想要监听的键.

问题描述： 组件监听键盘事件，vue提供的按键修饰器无法监听到组件整体上。 将监听事件绑定在document上是可行的，但在组件销毁时，该事件依旧存在。在Vue中，取消了键盘码，用名字代替，如 e.code === 'ArrowLeft' 代表的就是左键，其他名字可以在控制台打印出自己想要的按键名，或直接参照[菜鸟教程]

解决方案： 创建组件时，将事件绑定在document上，销毁组件时，再移除该事件

created() {
  document.addEventListener('keyup', this.escEvent)
},
methods: {
    escEvent(){
        if(window?.event?.keyCode == 27) this.closeComp()
    },
    closeComp() {
        // ...
    }
}
beforeUnmount() {
  document.removeEventListener('keyup', this.escEvent)
},

需要注意的时，addEventListener，removeEventListener的第二个参数需指向同一function。否则，后者将不会生效。 另外，如果使用document.onkeyup()监听，将会替换此前的onkeyup监听事件

1、在当前页截获键盘事件，所有按钮均被控制

  created () {
    this.keyDown();
  },
  beforeDestroy () {
    this.keyDownReview()
  },
  methods: {
    //按键恢复
    keyDownReview () {
      document.onkeydown = function (event) {
        var e = event || window.event;
        e.returnValue = true;
      }
    },
    //按钮监听键盘
    keyDown () {
      //监听键盘按钮
      document.onkeydown = function (event) {
        var e = event || window.event;
        var keyCode = e.keyCode || e.which;
        switch (keyCode) {
          case 112://F1
            alert('F1')
            break;
          case 113://F2
            alert('F2')
            break;
          case 117://F6
            alert('F6')
            break;
          case 119://F8
            alert('F8')
            break;
          case 13://enter
            alert('enter')
            break;
          default:
            break;
        }
        if (e && e.preventDefault) {
          e.preventDefault();
        } else {
          window.event.returnValue = false;
        }
      }
    },
}

调用methods的方法时，最好使用that，因为this在子路由或子组件中不能直接获取到

2、单一按钮通过单一键盘键控制，其他不受影响

<el-button type="primary" @click="refresh">刷新(F1)</el-button>

  created () {
    this.keyDown()
  },
  beforeDestroy () {
    this.keyDownReview()
  },
  methods: {
    //按键恢复
    keyDownReview () {
      document.onkeydown = function (event) {
        var e = event || window.event;
        e.returnValue = true;
      }
    },
    //键盘按钮截获
    keyDown () {
      document.onkeydown = e => {
        //112表示F1键
        if (e.keyCode === 112) {
          //F1键后执行刷新方法
          this.refresh()
          //取消原来的后续事件
          e.preventDefault()
        }
      }
    },
    refresh () {
      alert('refresh')
    },
}

全部的按键别名

.enter .tab .delete //(捕获“删除”和“退格”键) .esc .space .up .down .left .right