Vue 键盘执行方法实现

228 阅读1分钟

vue的按键修饰符不够用了,只能在输入状态下使用

这时可以通过 js 的 document.onkeydown 来监听用户敲击键盘事件执行方法

  • onkeydown — 按下按键事件立即执行
  • onkeyup — 按键抬起后执行

执行时机的区别,一旦按下并不能取消执行

created() {
    document.onkeydown = () => {
    	const e = event.keyCode
        if (e == 13)
            //Enter
            this.startTest();

        if (e == 32)
            //Space
            this.onDirection();

        if (e == 68)
            //D
            this.onDrop();

        if (e == 70)
            //F
            this.onFull();
    };
},

当一个项目内多个组件都需要监听按键,使用onkeydown就会冲突出bug 这时就需要改用addEventListener方法

	document.addEventListener("keydown", () => {
		let e = event.keyCode;
        ....

keycode对照表: