element input使用@keyup.enter.native

Question

1.想要实现的功能

输完验证码后敲回车,可以进行登录

2.实现的思路
`

<el-form
  :model="loginForm"
  :rules="rules"
  ref="loginForm"
  class="loginForm"
  @submit.native.prevent>
    <el-form-item prop="authCode" class="login-item">
        <span class="loginTips iconfont icon-yanzhengma"></span>
        <el-input
          @keyup.enter.native="submitForm('loginForm')"
          class="area"
          type="authCode"
          placeholder="请输入验证码"
          v-model="loginForm.authCode"
        ></el-input>
    </el-form-item>
 </el-form>

`
在输完验证码后,敲回车,随即调登录的方法

      submitForm(loginForm) {
          this.$refs[loginForm].validate((valid) => {
            if (valid) {
              let params = {
                authCode: this.loginForm.authCode,
              };
              this.$http
                .wisdomPost(`url`, params)
                .then((res) => {
                    // 成功的话跳转到登录页,
                    // 验证码错误的话 重新刷新验证码
                    }
          });
    },

按照以上方法写完后会有一个bug
在输入正确的验证码后,连敲两次回车,就会触发两次登录的接口,第一次登录成功,第二次会有一个验证码错误的弹窗,这样很容易误导人

请问该怎么防止用户连敲两次回车呢?????

Answer 1

可以选择加个开关 就像loading一样 回车时候loading true 请求完成loading false
请求前判断loading是否为false
如果这种需求过多 可以选择axios拦截器里面操作
https://www.cnblogs.com/linbudu/p/11259070.html

Answer 2

在你的触发事件里让当前元素失去焦点就行了