element實現驗證碼發送倒計時功能

template部分

  <el-button plain style="margin-left: 20px" type="primary" @click="sendCode()" :disabled="isDisabled">{{ buttonName }}</el-button>

script部分

 buttonName:"發送驗證碼",
 isDisabled: false,
 sendCode(){
            var reg = new RegExp(/^[1]([3-9])[0-9]{9}$/)
            if (!reg.test(this.dialog.phoneNum)){
              this.$notify.error({
                title: '錯誤',
                message: '當前輸入的手機號格式不正確'
              });
            }else if (this.dialog.phoneNum.length<=0){
              this.$notify.error({
                title: '錯誤',
                message: '當前尚未填寫您的手機號'
              });
            }else {
              let that=this;
              that.isDisabled=true;
              let interval=window.setInterval(function () {
                that.buttonName=that.time+'秒后重新發送';
                --that.time;
                if (that.time<0){
                  that.buttonName="重新發送";
                  that.time=60;
                  that.isDisabled=false;
                  window.clearInterval(interval);
                }
              },1000);
            }
          },

 

參考於此篇文章