短信点击后,获取倒计时vue

html

 <div class="phoneyzm_lis2" @click="CodeBln ? clickNumberCodeFnc() : ''"></div>

js

data(){
    return{
          CodeBln: false,
      // 倒计时秒数
      timeIntinvel: null,
      // 按钮上的文字
      codeMsg: "获取验证码",
  }
},
methods:{
    clickNumberCodeFnc(){
         //防止多次点击(上面html已经有了可以选择不要)
   if (this.CodeBln == true) {
        return;
    }
        clearInterval(that.timeIntinvel);//清理定时器
    that.CodeBln = false;//把按钮变成不可点击
    let index = 60;//读秒
    //开始倒计时
    that.timeIntinvel = setInterval(() => {
          index--;
        if (index <= 0) {
              index = 0;
              that.CodeBln = true;
              that.codeMsg = "获取验证码";
         } else {
               that.codeMsg = `<span style="color:#ff190e">${index}S</span>重新获取`;
         }
     }, 1000); 
    }
}