定义公共/全局函数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中的逻辑不易理解。如有更好方法请指出！！！
