Vue:获取验证码按钮倒倒计时效果


 <el-button
            type="primary"
            plain
            @click="getCaptcha"
            :disabled="flag"//点击之后按钮不可获取
          >{{content}}</el-button>
//content显示按钮内文本
data() {
    return {
      // 验证码按钮
      flag: false,//按钮是否可取
      content: "发送验证码",//按钮内文本
      totalTime: 60,//倒计时时间
    };
  },
getCaptcha() {
      this.flag = true;//点击之后设置按钮不可取
      this.content = this.totalTime + "s后重新发送";//按钮内文本
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "重新发送验证码";
          this.totalTime = 60;
          this.flag = false; //这里重新开启
        }
      }, 1000);
    },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM