vue 倒计时发送验证码

<el-input v-model="testCode" placeholder="请输入验证码" style="width:80%;">
            <el-button slot="append" @click="again" v-show="show">发送验证码</el-button>
            <el-button slot="append" v-show="!show">{{djs}}s</el-button>
          </el-input>
 data() {
    return { 
djs: "",
      show: true,
      timer: null
    };
 again() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.djs = TIME_COUNT;
 if(this.djs==TIME_COUNT){
          console.log("验证码")
        }
this.show = false;
        this.timer = setInterval(() => {
          if (this.djs > 0 && this.djs <= TIME_COUNT) {
            this.djs--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

猜你喜欢

转载自www.cnblogs.com/xymaxbf/p/12462279.html