js验证码倒计时功能

1、效果

2 代码部分

// 注册获取验证码
    async getVerifyCode (tag) {
      var form = {}
      if (this.validatePhone(tag)) {
        this.validateBtn()
        switch (tag) {
          case 'stu':
            form = this.registerForm
            break
          case 'tea':
            form = this.teaRegisterForm
            break
          default:
            break
        }
        await this.$http.post('Message/registerMessage', {
          phonenum: form.phone
        })
      }
    },
// 60s倒计时
    validateBtn () {
      let time = 60
      const timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer)
          this.btnTitle = '获取验证码'
          this.disabled = false
        } else {
          // 倒计时
          this.btnTitle = time + '秒后重试'
          this.disabled = true
          time -= 1
        }
      }, 1000)

<el-form-item label="验证码:" prop="code">
   <el-input
     v-model="teaRegisterForm.code"
     placeholder="请输入验证码"
     autocomplete="off"
   ></el-input>
 </el-form-item>
 <el-button v-if="btnTitle" :disabled = 'disabled' class="getCode" @click="getVerifyCode('stu')">{{btnTitle}}</el-button>