获取验证码60s倒计时

个人blog，欢迎关注加收藏

HTML

//60s倒计时，数字倒数
<div class="countdown" v-if="isVerify">
    <span>|</span>&nbsp;<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请求
  },
}