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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值