基于vue的短信验证码倒计时
最近做了一个小的demo,分享给大家,在很多地方都能用到。
一般获取短信验证码的时候会用到这个demo:
el-button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时:
<el-button type="primary" class="code_btn" style="background: #fff;color: #000;border: 1px solid #999;float: right;margin-top: 10px;" @click.native.prevent="getMessageCode('formData')" :loading="logining">
<span v-if="!sendMsgDisabled">获取验证码</span>
<span v-if="sendMsgDisabled">{{codeTime+'秒后获取'}}</span>
</el-button>
data里设置初始数据:
codeTime: 59, // 发送验证码倒计时
sendMsgDisabled: false, // 是否显示获取验证码按钮
在发送短信验证码接口请求的成功回调函数里:
_this.sendMsgDisabled = true;
let codeInterval = window.setInterval(function() {
if ((_this.codeTime--) <= 0) {
_this.codeTime = 59;
_this.sendMsgDisabled = false;
window.clearInterval(codeInterval);
}
}, 1000);
好了 一个简单的vue倒计时demo效果已经实现了,核心代码是定时器里面,codeTime为0时即倒计时结束,初始化codeTime及切换按钮的显示状态。