倒计时:
例如:登录页面获取手机验证码登录
代码:
/*
text:'获取验证码' => 按钮的初始展示样式是获取验证码
disabled:false, => 是否禁用按钮 防止用户在短时间内多次点击
*/
<button @tap="getCode()" :disabled="disabled">{{text}}</button>
//点击事件
getCode(){
this.disabled = true;
let num = 60;
this.text = `${num}s后重新获取`;
let timer = setInterval(() => {
num--;
if(num > -1) {
this.text = `${num}s后重新获取`;
} else {
clearInterval(timer);
this.disabled = false;
this.text = '验证码';
}
},1000)
},