发送验证码,按钮显示秒数

<el-button  size="mini" type="primary" @click="sendMessage" style="margin-left:5px;width:93px;" v-loading="loading"  :disabled="showButton">{
   
   {time}}{
   
   {sendCode}}</el-button>

js方法:

sendMessage:function(){
  this.$refs['formData'].validateField('phoneNumber',(validMessage)=>{//验证手机号码输入框是否符合标准
    if(validMessage != '') {
      return false;
    }
      this.loading = true;
      let _this = this;
      this.time = 60;
      var  param ={phoneNumber:this.formData.phoneNumber};
      registerApi.getVerificationCode(param).then((res)=>{
        if(res.data.data.status == true){//后台接口返回值后,开始设置秒数
          this.loading = false;
          _this.sendCode = 's后失效';
          _this.showButton = true;
          this.verification = res.data.data.identifyingCode;
          let interval = window.setInterval(function(){
            if((_this.time--) <= 0){
              _this.time = '';
              _this.sendCode = '发送验证码';
              _this.showButton = false;
              _this.verification = null;
              window.clearInterval(interval);
            }
          },1000);
        }
        else{
          Msg.error(Tip.SERVER_ERROR);
        }
      }).catch((message) =>{
        this.loading = false;
        Msg.error(message);
      })

  })
    },

猜你喜欢

转载自blog.csdn.net/qq_39692513/article/details/81432434