vue验证码倒计时器
<input type="button" v-model="sendBtnTxt" @click="getCode" :disabled="msgBtnDisabled" />data() {return {sendBtnTxt:'发送验证码' ,//按钮显示内容msgBtnDisabled
·
<input type="button" v-model="sendBtnTxt" @click="getCode" :disabled="msgBtnDisabled" />
data() {
return {
sendBtnTxt:'发送验证码' ,//按钮显示内容
msgBtnDisabled:false, //按钮禁用状态
timer:null, //计时器
countdown:60,//时间
}
},
// 验证码60秒倒计时
getCode(){
if (!this.timer) {
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
if (this.countdown !== 0) {
this.sendBtnTxt = "重新发送(" + this.countdown + ")";
this.msgBtnDisabled=true;
} else {
clearInterval(this.timer);
this.sendBtnTxt = "获取验证码";
this.countdown = 60;
this.timer = null;
this.msgBtnDisabled = false;
}
}
}, 1000);
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)