vue3写一个倒计时功能要求如下：首先用户需要输入以分钟为单位的倒计时时间然后才能点击开始按钮点击开始按钮后开始倒计时还要有暂停按钮继续按钮和重置按钮当用户点击暂停按钮则停止倒计时当用户点击继续按钮则继续倒计时点击重置按钮则需要重新输入倒计时时间。

这是一个简单的Vue 3倒计时功能的示例代码：

<template>
  <div>
    <label for="countdown">请输入倒计时时间（分钟）：</label>
    <input type="number" id="countdown" v-model="countdownTime" min="1" @input="resetCountdown">
    <button @click="startCountdown" :disabled="countdownRunning || countdownTime < 1">开始</button>
    <button @click="pauseCountdown" :disabled="!countdownRunning">暂停</button>
    <button @click="resumeCountdown" :disabled="countdownRunning">继续</button>
    <button @click="resetCountdown" :disabled="!countdownRunning">重置</button>
    <div>{{ countdownDisplay }}</div>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  name: 'Countdown',
  setup() {
    // 计时器相关变量
    const countdownTime = ref(0);
    const countdownRunning = ref(false);
    const countdownTimer = ref(null);

    // 倒计时显示文字
    const countdownDisplay = computed(() => {
      const minutes = Math.floor(countdownTime.value / 60);
      const seconds = countdownTime.value % 60;
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    });

    // 重置倒计时
    const resetCountdown = () => {
      if (countdownRunning.value) {
        clearInterval(countdownTimer.value);
        countdownRunning.value = false;
      }
      countdownTime.value = 0;
    };

    // 开始倒计时
    const startCountdown = () => {
      countdownRunning.value = true;
      countdownTimer.value = setInterval(() => {
        countdownTime.value--;
        if (countdownTime.value <= 0) {
          clearInterval(countdownTimer.value);
          countdownRunning.value = false;
        }
      }, 1000);
    };

    // 暂停倒计时
    const pauseCountdown = () => {
      clearInterval(countdownTimer.value);
      countdownRunning.value = false;
    };

    // 继续倒计时
    const resumeCountdown = () => {
      countdownRunning.value = true;
      countdownTimer.value = setInterval(() => {
        countdownTime.value--;
        if (countdownTime.value <= 0) {
          clearInterval(countdownTimer.value);
          countdownRunning.value = false;
        }
      }, 1000);
    };

    // 监听倒计时时间变化
    watch(countdownTime, (newValue) => {
      if (countdownRunning.value) {
        clearInterval(countdownTimer.value);
        startCountdown();
      }
    });

    return {
      countdownTime,
      countdownRunning,
      countdownDisplay,
      resetCountdown,
      startCountdown,
      pauseCountdown,
      resumeCountdown,
    };
  },
};
</script>

在这个组件中，我们使用了Vue 3中的ref、watch和computed函数来定义了一些变量和方法。具体来说：

• countdownTime是用户输入的倒计时时间，初始值为0；
• countdownRunning表示倒计时是否正在运行，初始值为false；
• countdownTimer是倒计时计时器的引用；
• countdownDisplay是计算属性，用来显示倒计时的剩余时间；
• resetCountdown()方法用来重置倒计时，将计时器停止并将倒计时时间设为0；
• startCountdown()方法用来开始倒计时，每隔一秒钟将倒计时时间减1，直到倒计时时间为0；
• pauseCountdown()方法用来暂停倒计时，将计时器停止，但不会重置倒计时时间；
• resumeCountdown()方法用来继续倒计时，与startCountdown()方法类似；
• watch(countdownTime, (newValue) => { ... })用来监听倒计时时间的变化，如果倒计时时间发生变化，且倒计时正在运行，则会先停止计时器，然后重新开始倒计时。

在模板中，我们使用了一些基本的HTML元素和Vue指令来实现交互效果。具体来说：

• <input type="number" v-model="countdownTime" min="1" @input="resetCountdown">用来让用户输入倒计时时间，只允许输入正整数，并且每次输入时都会调用resetCountdown()方法；
• <button @click="startCountdown" :disabled="countdownRunning || countdownTime < 1">开始</button>用来开始倒计时，如果倒计时已经在运行或倒计时时间小于等于0，则按钮被禁用；
• <button @click="pauseCountdown" :disabled="!countdownRunning">暂停</button>用来暂停倒计时，如果倒计时正在运行，则按钮可用；
• <button @click="resumeCountdown" :disabled="countdownRunning">继续</button>用来继续倒计时，如果倒计时已经暂停，则按钮可用；
• <button @click="resetCountdown" :disabled="!countdownRunning">重置</button>用来重置倒计时，如果倒计时正在运行，则按钮被禁用；
• <div>{{ countdownDisplay }}</div>用来显示剩余的倒计时时间，每隔一秒钟自动更新。