关于javascript:前端Vue实现手机号验证码登录60s禁用倒计时

援用
这篇文章次要介绍了 Vue 实现手机号验证码登录（60s 禁用倒计时），帮忙大家更好的了解和应用 vue，具备很好的参考价值，感兴趣的敌人能够理解下

最近做了个 vue 我的项目，前端通过手机号验证码的形式登录，获取验证码的按钮须要倒计时，点击一次之后，60 秒内不能再次点击。先看效果图：

输出正确格局的手机号码后，“获取验证码”按钮方可点击；点击“获取验证码”后，按钮进入 60s 倒计时，效果图如下：

效果图有了，接下来就是代码了：

<el-button @click="getCode()"  :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>

data 返回数据：

data() {
     return {
        loginForm: {
            phoneNumber: '',
            verificationCode: '',
        },
        codeBtnWord: '获取验证码', // 获取验证码按钮文字
        waitTime:60, // 获取验证码按钮生效工夫
        getCodeBtnDisable: false,
    }
}

校验手机号是否正确

computed: {
    // 用于校验手机号码格局是否正确
    phoneNumberStyle(){let reg = /^1[3456789]\d{9}$/
        if(!reg.test(this.loginForm.phoneNumber)){return false}
        return true
    }
}

mothods 中增加获取验证码办法

async sendCode () {
      try {let params = {}
        params.phone = this.loginForm.phoneNumber
        let data = await axios.post('/sendMessage',params)
        this.$message.success('验证码发送胜利')
        let that = this
        that.waitTime--
        that.getCodeBtnDisable = true
        this.codeBtnWord = `${this.waitTime}s 后从新发送 `
        let timer = setInterval(function () {if (that.waitTime > 1) {
            that.waitTime--
            that.codeBtnWord = `${that.waitTime}s 后从新发送 `
          } else {clearInterval(timer)
            that.codeBtnWord = '获取验证码'
            that.getCodeBtnDisable = false
            that.waitTime = 60
          }
        }, 1000)
      } catch (res) {console.log(res)
      }
    },

以上就是 Vue 实现手机号验证码登录（60s 禁用倒计时）的具体内容，如有谬误请指出！