Vue3发送验证码，开启倒计时，并且倒计时结束前无法点击

目录

1.最终效果

2.HTML

3.JS

---

1.最终效果

先看效果，点击发送验证码，然后开启倒计时，倒计时结束前无法再次发送，并且该按钮处于无法选中状态

废话少说，上干货，直接看代码

2.HTML

按钮部分内容：

• disabled： 是按钮无法选中的属性，这里将这个属性绑定到组件实例counting属性中，counting为true时，按钮处于不可用状态，为false为可用
• @click：这个不用多说，是控制按钮触发事件的
• v-text：绑定的按钮文本内容 

<el-button :disabled="counting" @click="startCountdown" v-text="buttonText"></el-button>

3.JS

组件实例化(也就是return里面的内容):

• counting: false                     按钮状态默认false，可点击

• buttonText: '发送验证码'      按钮文本内容默认

• countdown: 90                     倒计时时长

• timer: null                             定时器

methods：

methods函数，这个不用过多介绍

startCountdown() {
      if (this.counting) return;

      this.counting = true;
      this.buttonText = `${this.countdown} 秒后重试`;

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

        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.counting = false;
          this.buttonText = '发送验证码';
          this.countdown = 90;
        }
      }, 1000);
    },

beforeDestroy：

beforeDestroy是vue.js中的生命周期钩子函数，用于执行一些清理操作，比如清除定时器、销毁非Vue插件等。这里用于清理定时器

beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

以上就是倒计时功能的实现！

如有错误、欢迎指正~