Vue获取验证码倒计时封装

定义公共/全局函数timeCountdown

function 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>0 && 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
    }
}

在vue中使用

1、template

<button class="getmodBtn" @click="getCode()" :disabled="!login.canGet">
   <span v-show="!login.canGet">{{login.waitTime+"s后重新获取"}}</span>
   <span v-show="login.canGet">获取手机验证码</span>
</button>

2、data

data (){
  return{            
    tempLogin:{ //定义一个临时对象
      canGet: true,
      timer: null,
      waitTime: 60
      },
    }
},

3、computed(重点)

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

4、methods

methods:{
    getCode(){
        //倒计时开始
        timeCountdown(this.login);  //参数为最终对象
    }
}

结论

如果项目中有在不用组件多个地方点击按钮倒计时功能，该封装可以减少methods中代码量和维护量。但该方法依然需要在data和computed中定义多个变量和方法，且computed中的逻辑不易理解。如有更好方法请指出！！！