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);
            }
          },

 

参考于此篇文章