个人blog,欢迎关注加收藏
HTML
//60s倒计时,数字倒数
<div class="countdown" v-if="isVerify">
<span>|</span> <span>{{countDown}}s</span>
</div>
<div class="getNum">
//点击获取验证码,开始倒计时
<mt-cell title="获取验证码" @click.native="getNum"></mt-cell>
//在60s无法再获取验证码
<mt-popup v-model="repeatVerify" position="top" popup-transition="popup-fade">亲,请勿重复验证哦!</mt-popup>
</div>
js
//数据部分
data () {
return {
isVerify:false,//是否显示验证码60s倒计时
countDown:60,//验证码60s倒计时
repeatVerify:false,//重复验证提示框是否显示
}
//方法部分:
methods:{
//60s倒计时
count60(){
clearTimeout(count60Timeout)//清除计时器
let _this = this;
if(_this.countDown > 0){
_this.countDown--;
// console.log(_this.countDown)
}
if(_this.countDown == 0){
_this.countDown = 60;//恢复60s设定
_this.isVerify = false;//不显示60s计时器
clearTimeout(count60Timeout)//清除计时器
return //结束方法的调用
}
let count60Timeout = setTimeout(_this.count60,1000);
},
//点击获取验证码
getNum(){
let _this = this;
if(_this.countDown < 60){
_this.repeatVerify = true;//显示请勿重复验证提示框
setTimeout(function(){
_this.repeatVerify = false;//5s后关闭请勿重复验证提示框
},5000);
return//正在获取验证码时不能重复获取验证码
}
_this.isVerify = true;//显示60s倒计时
_this.count60();//开始60s倒计时
//调用后台接口,向服务器请求验证码,ajax请求
},
}