标签：Vue false 验证码 倒计时 code let startTime countDownTime true

mConfigs.ver_code_ide 这个为倒计时写入stora的key唯一名称，为了避免系统内，多处倒计时，key不是唯一问题

大家参考倒计时逻辑即可，每个人的项目不同，这里提供大概的实现代码

export default {
  name: "bm_phone_login",
  data () {
    return {
      //用户输入信息
      input_info: {
        phone: "",
        code: "",
      },
      //倒计时
      countDownTime: 60,
      timeOut: true,
      timer: null,
      //错误信息
      errorFlag: {
        phone_empty: false,
        phone_err: false,
        code_empty: false,
        code_err: false
      },
      //登录按钮禁用
      isLoginForbidden: true,
      // 获取验证码按钮禁用
      getCodeDisabled: true,
      // 获取验证码按钮文字
      getCodeBtnText: "获取验证码",

      countdownIng: false,
    }
  },
  mounted () {
    let sendEndTime = localStorage.getItem(`startTime${this.mConfigs.ver_code_ide}`);
    if (sendEndTime) {
      this.countdown();
    }
  },

  methods: {
    /**************************************************************获取验证码**************************************************************/
    countdown () {
      let that = this;

      let startTime = localStorage.getItem(`startTime${that.mConfigs.ver_code_ide}`);
      let nowTime = new Date().getTime();
      if (startTime) {
        let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
        this.countDownTime = surplus <= 0 ? 0 : surplus;
      } else {
        this.countDownTime = 60;
        localStorage.setItem(`startTime${this.mConfigs.ver_code_ide}`, nowTime);
      }

      that.timer = setInterval(() => {
        that.countDownTime--;
        that.getCodeBtnText = that.countDownTime + "秒";
        that.getCodeDisabled = true;
        that.countdownIng = true;
        if (that.countDownTime <= 0) {
          localStorage.removeItem(`startTime${this.mConfigs.ver_code_ide}`);
          clearInterval(that.timer);
          that.countDownTime = 60;
          that.timeOut = true;
          that.countdownIng = false;
          if (that.input_info.phone == "") {
            that.getCodeDisabled = true;
          } else {
            that.getCodeDisabled = false;
          }
          that.getCodeBtnText = "获取验证码";
        }
      }, 1000)
    },
    getVerifyCode () {
      let that = this;
      let input_phone = this.input_info.phone.replace(/\s*/g, "");      //去除空格
      this.$emit('parent_get_code', input_phone, function (flag) {
        if (flag) {
          //倒计时
          if (!that.errorFlag.phone_err && !that.errorFlag.phone_empty) {
            // Toast('验证码已发送');
            that.countdown();
          } else {
            that.errorFlag.phone_empty = true;
          }
        } else {
          that.timeOut = true;
        }
      });
      this.timeOut = false;

   }
}
</script>

标签：Vue,false,验证码,倒计时,code,let,startTime,countDownTime,true
来源： https://www.cnblogs.com/codedisco/p/15681824.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。