vue 前端 发送验证码按钮倒计时

  <FormItem prop="verificationCode" class="verification_code">

              <Input

                type="number"

                v-model="formFind.verificationCode"

                placeholder="请输入短信验证码"

                size="large"

                class="messInput"

              >

                <Button

                  :disabled="codebtn"

                  slot="append"

                  @click="getCode"

                  style="border: 0;"

                  >{{ sendCode }}</Button

                ></Input

              >

            </FormItem>

data(){

return{

     sendCode: "获取验证码",

      // 倒计时时间

      time_count: 60,

      timer: null,

      // 控制发送验证码按钮

      codebtn: true,

}

}

method:{

 getCode() {

      this.$axios

        .get(`url`)

        .then(res => {

          // console.log(res);

          this.$Message.success("验证码已发送,请注意查收!");

          let that = this;

          if (!that.timer) {

            that.timer = setInterval(() => {

              if (that.time_count > 0) {

                this.codebtn = true;

                that.time_count--;

                that.sendCode = "重新发送" + that.time_count + "s";

              } else {

                that.sendCode = "获取验证码";

                clearInterval(that.timer);

                that.timer = null;

                that.time_count = 60;

                this.codebtn = false;

              }

            }, 1000);

          }

        })

        .catch(err => {

          console.log(err);

          this.$Message.error("验证码发送失败,请重新发送!");

        });

    },}