一、键盘事件介绍

键盘事件是用户通过打字机输入字符的过程中触发的事件。Vue.js提供了四种键盘事件：

• @keydown: event - 当键盘按键被按下时触发。
• @keyup: event - 当键盘按键被松开时触发。
• @keypress: event - 当按下字符键时触发（“重复”事件将在短时间内连续发生，直到键盘按键停止）。
• @keydown.ctrl.alt.shift.meta: event - 当组合按键（例如Ctrl + Alt + Shift + 空格）被按下时触发。

系统修饰键（用法特殊）：ctrl、alt、shift、meta

• 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
• 配合keydown使用：正常触发事件。

二、Vue中的使用

2.1、vue中常用的键盘别名

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.2、Vue未提供别名的按键，可以使用按键原始的key值去绑定

2.3、系统修饰键 (用法特殊) : ctr1、alt、shift、meta

• 配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
• 配合keydown使用: 正常触发事件。
• 也可以使用keyCode去指定具体的按键 (不推荐)
• Vue.config.keyCodes自定义键名 = 键码，可以去定制按键别名

三、Vue中的使用键盘别名注意事项

3.1、html元素使用

 <div @keydown.enter="enterKeyDown"> </div>

3.2、自定义组件和ElementUI上面需要加上.native修饰符

 <el-button @keydown.enter.native="enterKeyDown"> </div>

四、键盘事件不触发的问题

由于键盘事件的触发需要有焦点
在input中绑定是没有问题的（光标在input框内）

但是在元素或者按钮上面是没有焦点的，所以需要认为添加监听

   /* 创建keyDown事件 */
    createKeyDown() {
      document.onkeydown = (e) => {
        console.log(e);
        if (e.code === "Enter") {
          // this.handleSaveAndAddBox();
        }
      };
    },
    /* 销毁keyDown事件 */
    destroyedKeyDown() {
      document.onkeydown = (e) => {
        if (e.code === "Enter") {
        }
      };
    },

 created() {
    this.createKeyDown();
  },
  beforeDestroy() {
    this.destroyedKeyDown();
  },