vue封装发送验证码倒计时方法

方法可以写在全局公共调用的util中

timeCountdown(obj) { //obj包括timer、waitTime 、canGet
    const TIME_COUNT = 60; //默认倒计时秒数
    if (!obj.timer) {
        obj.waitTime = TIME_COUNT;
        obj.canGet = false;
        obj.timer = setInterval(() => {
         if (obj.waitTime>1 && obj.waitTime<=TIME_COUNT) {
            obj.waitTime--;
        }else{
            obj.canGet = true;
            clearInterval(obj.timer); //清空定时器
            obj.timer = null;
          }
        }, 1000)
    }
  return {
      timer: obj.timer,
      canGet: obj.canGet,
      waitTime: obj.waitTime
  }
 },

在组件中调用

调用处

util.timeCountdown(this.login);
computed:{
        login(){ //最终对象
            if(!this.tempLogin.canGet){
                return util.timeCountdown(this.tempLogin);
            }else{
                return this.tempLogin;
            }
        },
    },

data中定义

  tempLogin:{ //定义一个临时对象
                canGet: true,
                timer: null,
                waitTime: 20
 },


<button  @click="sendMessage" v-show="login.canGet"  class="sendMessage codebox">发送验证码</button>
<button   v-show="!login.canGet"  disabled="true" class="overSend codebox">{{login.waitTime+'s后重新发送'}}</button>