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 {
    // 倒计时结束，清除定时器并重置isDisabled
    clearInterval(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，从而恢复按钮的可点击状态。