一般获取短信验证码的时候会用到这个呆毛:
button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时:
<button @click="getCode">
<span class="tip" v-if="!sendMsgDisabled && !reGet">发送验证码</span>
<span class="tip" v-if="!sendMsgDisabled && reGet">重新获取</span>
<span class="tip" v-if="sendMsgDisabled">{{rTime+'秒后重新获取'}}</span>
</button>
data() {
return {
reGet: false, // 重新获取
rTime: 60, // 发送验证码倒计时
sendMsgDisabled: false, // 发送验证码按钮状态
tel: "",
code: ""
};
},
send() {
let that = this;
that.sendMsgDisabled = true;
let rTime = that.rTime;
// 倒计时
let interval = window.setInterval(() => {
if (--that.rTime <= 0) {
that.rTime = rTime;
that.sendMsgDisabled = false;
that.reGet = true; // 重新获取按钮
window.clearInterval(interval);
}
}, 1000);
}
线上完整代码请戳戳戳戳戳