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