vue 實作60秒倒計時 然後再次點選事件加載

本人感覺特别簡單的實作方法 不用啥計時器啊啥的 vue多強大 廢話不多說 下面就是怼代碼

複制即用

點選按鈕倒計時

<button @click="getlogin" class="btn-bottom" type="primary" :disabled="disabled">{{ btnText }}</button>
           

data定義

data () {
    return {  
        // 擷取驗證碼
        disabled: false,
        interval:undefined,
        totalCount:0,
    }
  }
           

計算屬性監視

computed: {
      btnText(){
         return this.totalCount !==0? `${this.totalCount}秒再次擷取`: "擷取驗證碼"
       }
   },
           

methods：

getlogin(){
          // 按鈕60秒倒計時
            this.disabled=true
            this.totalCount=60
            this.getCode()    //60秒過倒計時過後才能調用的事件
            this.interval=setInterval(()=>{
              this.totalCount--
              if(this.totalCount === 0){
                clearInterval(this.interval)
                this.disabled=false
              }
            },1000);
}
           

60秒過倒計時過後才能調用的事件

getCode(){
 
}
           

css自己定義吧 多簡單 多實用

喜歡就關注我吧，我會經常更新大家在項目中實用的項目需求 複制即用 本人親測

喜歡的可以加群一起讨論QQ: