Element-UI Button键盘事件不生效的问题

今天在做练习在写到登录功能时，想绑定一个键盘事件按下Enter键实现调用方法发送请求，在使用的过程中发现了问题，查询资料后解决并记录在此。

正常来说如下代码可以按下Enter键可以正常调用login函数，但是实践中没有生效。

<el-form-item>
  <el-button type="primary" @click="login" @keydown.enter="login">登录</el-button>
</el-form-item>

在网上查找解决办法时看到有人说加上.native修饰符，这样做的确可以解决问题，前提必须是你获取焦点的时候能正常执行，我本来就把Enter事件绑定在按钮上，不点按钮不能获得按钮焦点使用Enter键触发事件，点了按钮直接触发login函数，总之都得点一下，你这这这......

<el-form-item>
  <el-button type="primary" @click="login" @keydown.enter.native="login">登录</el-button>
</el-form-item>

后面改进了一下，可以直接把键盘事件绑定在form表单上，当你输入账号密码时，这就已经获取焦点了，既然获得了焦点，输入完成时直接点击键盘Enter就可以出发login函数请求接口做登录验证。

<el-form
  ref="loginDataRef"
  :model="loginData"
  :rules="loginDataRules"
  @keydown.enter.native="login"
>
  <!-- 用户名 -->
  <el-form-item prop="username">
    <el-input
      v-model="loginData.username"
      placeholder="用户名"
      prefix-icon="el-icon-user"
    ></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item prop="password">
    <el-input
      v-model="loginData.password"
      placeholder="密码"
      prefix-icon="el-icon-lock"
      type="password"
      show-password
      prop="password"
    ></el-input>
  </el-form-item>
  <!-- 登录按钮 -->
  <el-form-item>
    <el-button type="primary" @click="login">登录</el-button>
  </el-form-item>
</el-form>

问题到时解决了，但是浏览器有密码记录的功能，当你记录密码后，再次访问网站的时候，浏览器会自动填充，这是账号密码填充了，焦点却没有获取，Enter键盘事件也无法触发，影响体验。最终解决办法就是直接在mounted声明周期函数身上绑定原生键盘事件。

mounted() {
  document.addEventListener("keydown", () => {
    // 获取按下的键对应的数值 Enter键的数值是13
    let value = window.event.keyCode;
    // 如果按键数值是13的时候调用login函数
    if (value == 13) {
      this.login();
    }
  });
},