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);}},以上就是倒计时功能的实现！
如有错误、欢迎指正~