前端Vue实现手机号验证码登录（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)
      }
    },