vue3.js实现按钮倒计时

在Vue3中实现按钮的倒计时功能，通常需要结合`<script setup>`、定时器以及计算属性来完成。首先，我们需要定义一个状态变量`countdown`来存储剩余的时间，并创建一个按钮元素。然后，在`setup`中初始化这个计数，并设置一个定时器来每秒递减计数。

下面是一个简单的例子：

<template>
  <div>
    <button @click="startCountdown" :disabled="isDisabled">倒计时开始</button>
    <p v-if="showCount">{{ countdownText }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义计数状态
const countdown = ref(60); // 开始时设为60秒

// 计算文本
const countdownText = computed(() => {
  return `倒计时：${countdown.value}秒`;
});

// 开始倒计时函数
const startCountdown = () => {
  let intervalId;
  const countdownJob = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId);
      countdown.value = 0; // 倒计时结束时重置
      isDisabled.value = false; // 重置按钮禁用状态
    }
  }, 1000);

  intervalId = countdownJob;
  isDisabled.value = true; // 开始时禁用按钮
};

// 数据挂载后启动倒计时
onMounted(startCountdown);
</script>

在这个示例中，当用户点击“倒计时开始”按钮时，会调用`startCountdown`方法，开始倒计时。倒计时结束后，按钮会自动恢复点击状态。