Vue中实现敲击回车键登录

你白勺男孩TT2024-10-22 10:42

试了好几种方法无效，分享一下成功的方法，仅供参考。

mounted 中新增：

复制代码

mounted() {

  window.addEventListener('keyup' ,this.loginEnter,false)

}

methods 中新增：

复制代码

methods: {

  // 绑定回车键登录 ，建议13，和100都用上
  loginEnter(event) {
    if (event.keyCode === 13 || event.keyCode === 100) {
      this.login() // login是你自己写的登录方法
  },

  login(){
    // 这是你自己写的登录判定
  } 
},

在中新增：@submit.native.prevent="loginEnter"

注意最好带上 loginEnter 方法。有些人的方法直接让粘贴@submit.native.prevent，这个在 vue2 中好像无法识别。

复制代码

<el-form @submit.native.prevent="loginEnter" :model="user" :rules="rules" ref="userForm"  >
              

</el-form>

在你所有 el-input 标签中添加@keyup="loginEnter"

复制代码

<el-form-item prop="username">
  <el-input size="lager" style="margin: 10px 0;" prefix-icon="el-icon-user" placeholder="请输入用户名/工号"
            v-model="user.username"
            @keyup="loginEnter"></el-input>
</el-form-item>
<el-form-item prop="password">
  <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"
            v-model="user.password" @keyup="loginEnter"></el-input>
</el-form-item>
<el-form-item prop="验证码">
  <div style="display: flex">
    <el-input size="medium" style="margin: 5px 0;width: 180px;margin-right: 20px" prefix-icon="el-icon-key"
              v-model="form.validCode" placeholder="点击图片更换验证码" @keyup="loginEnter"></el-input>
    <valid-code @input="createValidCode" style="margin:5px 0;height:50px;background-color: #f0f0f0"/>
  </div>
</el-form-item>