vue 添加enter回车事件

问题所在：今天遇到一个需求，给el-button组件添加点击事件，之前对这块一直一知半解，所以特此总结一下
解决方法：
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，所以对一个普通的Vue input组件，可以这样实现一个回车事件：

//当点击了回车时，便会调用function函数
<input v-on:keyup.13="function">

但是对于开发来说，键盘事件对应的keyCode比较难记，所以Vue 为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。
（别名可参考：https://blog.csdn.net/qq_38591756/article/details/88732443）
所以上面的代码，等同于：

//当点击了回车时，便会调用function函数
<input v-on:keyup.enter="function">

还有一种缩写语法（比较常用）：

//当点击了回车时，便会调用function函数
<input @keyup.enter="function">

注意：

但是，如果是在自己封装的组件或者是使用一些第三方的UI库（比如element-ui）时，会发现并不起效果，这时就需要用到.native修饰符了，如：

<el-input
  v-model="inputName"
  placeholder="输入你的名称"
  @keyup.enter.native="searchPerson"
  >
</el-input>

在使用过程中，如果页面只针对一个Input添加键盘enter事件，可以按照上面的情况解决。但是如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。如下：

mounted() {
    let that = this
    document.onkeydown = function (e) {
      e = window.event || e
      //保证是在登录页面发出的enter事件
      if ((that.$route.path === '/login'||that.$route.path === '/') && (e.code === 'Enter' || e.code === 'enter')) {
        //调用登录函数
        that.login();
      }
    }