html部分

  <el-button :disabled="disableButton" style="width:35%; float: right;" @click="startCountdown">
                <span>{{ buttonText }}</span>
              </el-button>

初始化:

      disableButton: false,
      buttonText: '获取验证码',
      countdown: 60

方法:

methods: {
    // 验证码发送倒计时
    startCountdown() {
      this.disableButton = true;
      this.buttonText = `${this.countdown}秒后再试`;

      const timer = setInterval(() => {
        this.countdown--;
        this.buttonText = `${this.countdown}秒后再试`;

        if (this.countdown === 0) {
          clearInterval(timer);
          this.disableButton = false;
          this.buttonText = '获取验证码';
          this.countdown = 60;
        }
      }, 1000);
    }
}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐