vue3使用倒计时弹框

您好！对于Vue3来说，可以使用组合API来实现倒计时弹框。下面是一个简单的示例代码，供您参考：

<template>
  <div>
    <button @click="showModal = true">点击弹出倒计时弹框</button>
    <div v-if="showModal">
      <h1>倒计时弹框</h1>
      <p>还剩余 {{ remainingTime }} 秒</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const showModal = ref(false);
    const remainingTime = ref(10);

    const timer = setInterval(() => {
      remainingTime.value--;
      if (remainingTime.value === 0) {
        clearInterval(timer);
        showModal.value = false;
      }
    }, 1000);

    onMounted(() => {
      showModal.value = true;
    });

    return {
      showModal,
      remainingTime,
    };
  },
};
</script>

在上面的代码中，我们使用了`ref`来定义了两个响应式变量`showModal`和`remainingTime`，分别表示弹框是否显示和剩余时间。在`setup`函数中，我们使用了`onMounted`钩子函数来在组件挂载后立即弹出倒计时弹框，并使用`setInterval`函数来实现每秒更新剩余时间的功能。当剩余时间为0时，我们使用`clearInterval`函数来停止计时器，并将弹框关闭。

以上是一个简单的实现示例，您可以根据自己的具体需求进行修改和扩展。希望能够对您有所帮助！