vue js 禁用控件一分钟,并显示倒计时
isCounting标记计时是否开始,remainTimeTip为显示文本,比如初始值设置为“获取验证码”,clock设置为每1秒自动调用一次,clearInterval(clock)会停止下一次的调用。
data(){
return {
remainTime:60,//禁用60秒
isCounting:false,//是否在计时
remainTimeTip:"获取验证码"
};
},
....
startCountDown(){
if(this.isCounting) return;
//计时开始
this.isCounting=true;
this.remainTimeTip="已发送("+this.remainTime+")";
var clock = setInterval(()=>{
if(this.remainTime>0){
this.remainTime--;
this.remainTimeTip="已发送("+this.remainTime+")";
}else{
clearInterval(clock);
this.isCounting=false;
this.remainTime=60;
this.remainTimeTip="重新发送";
}
},1000);
}
<span @click="startCountDown" >{{remainTimeTip}}</span>