<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);
}
}
vue验证码倒计时器
最新推荐文章于 2024-05-28 10:02:16 发布