Vue3 获取验证码按钮，倒计时60s

在Vue组件中，如果你希望在倒计时结束后自动恢复按钮的可点击状态，你需要确保在倒计时结束时清除定时器，并将isDisabled状态重置为false。

在代码中，startCountdown函数已经负责了减少remainingTime的值，并在它达到0时停止定时器。但是，由于isDisabled的状态是在handleClick函数中设置的，需要在startCountdown函数中或在某个监听器中（比如watchEffect，尽管在这个场景下不是必需的）来重置它。

不过，由于startCountdown已经足够处理停止定时器的逻辑，并且我们知道当remainingTime为0时应该重置isDisabled，我们可以在startCountdown函数内部处理这一点。这里是一个示例：

<template><div><el-button:disabled="isDisabled":type="isDisabled ? 'text' : 'primary'"@click="handleClick">{{ isDisabled ? `重新获取（${remainingTime}s）` : '获取验证码' }}</el-button></div>
</template><script setup>
import { ref } from 'vue';const remainingTime = ref(60);
const isDisabled = ref(false);
let timer = null;// 倒计时函数
const startCountdown = () => {if (remainingTime.value > 0) {remainingTime.value--;} else {// 倒计时结束，清除定时器并重置isDisabledclearInterval(timer);timer = null;isDisabled.value = false;remainingTime.value = 60; // 如果需要再次点击时从60秒开始，可以保留这行代码// 如果不需要再次点击时重置倒计时，可以删除上面的remainingTime.value = 60;}
};// 处理点击事件
const handleClick = () => {if (!isDisabled.value) {// 发送验证码的逻辑（这里只是模拟）console.log('验证码已发送');// 禁用按钮并开始倒计时isDisabled.value = true;timer = setInterval(startCountdown, 1000);}
};// 在这个场景中，我们不需要额外的watchEffect来监听remainingTime，
// 因为startCountdown已经处理了所有必要的逻辑。
</script><style scoped>
/* 你的样式 */
</style>

startCountdown函数会在remainingTime达到0时自动清除定时器，并将isDisabled设置为false，从而恢复按钮的可点击状态。