记录时间：2024-02-26
【使用“文心一言”搜索】
指令：Vue项目使用ts setup 语法，实现页面倒计时，封装Hook函数，包含start、reset、stop
在Vue 3中，你可以使用<script setup>语法和Composition API来封装一个倒计时Hook函数，该函数包含start、reset和stop等方法。下面是如何实现这个倒计时Hook并在Vue组件中使用的示例：
1. 封装自定义Hook函数（useCountdown.ts）
typescript复制代码| import { ref, onUnmounted } from 'vue'; | |
| export function useCountdown(initialSeconds: number) { | |
| const counter = ref(initialSeconds); | |
| let interval: ReturnType<typeof setInterval> | null = null; | |
| const start = () => { | |
| if (!interval) { | |
| interval = setInterval(() => { | |
| if (counter.value > 0) { | |
| counter.value--; | |
| } else { | |
| stop(); | |
| // 可以在这里添加倒计时结束后的逻辑 | |
| } | |
| }, 1000); | |
| } | |
| }; | |
| const stop = () => { | |
| if (interval) { | |
| clearInterval(interval); | |
| interval = null; | |
| } | |
| }; | |
| const reset = (seconds: number = initialSeconds) => { | |
| stop(); | |
| counter.value = seconds; | |
| }; | |
| onUnmounted(stop); | |
| // 不自动开始倒计时，由组件控制 | |
| // start(); | |
| return { | |
| counter, | |
| start, | |
| stop, | |
| reset, | |
| }; | |
| } |
2. 在Vue组件中使用自定义Hook
vue复制代码| <template> | |
| <div> | |
| <p>倒计时：{{ counter }}</p> | |
| <button @click="startCountdown">开始倒计时</button> | |
| <button @click="resetCountdown">重置倒计时</button> | |
| <button @click="stopCountdown">停止倒计时</button> | |
| </div> | |
| </template> | |
| <script setup lang="ts"> | |
| import { useCountdown } from './useCountdown'; | |
| const initialSeconds = 10; // 初始倒计时秒数 | |
| const { counter, start, stop, reset } = useCountdown(initialSeconds); | |
| const startCountdown = () => { | |
| start(); | |
| }; | |
| const stopCountdown = () => { | |
| stop(); | |
| }; | |
| const resetCountdown = () => { | |
| reset(initialSeconds); // 重置到初始秒数 | |
| }; | |
| </script> |
在这个示例中：
useCountdown函数接受一个initialSeconds参数，表示倒计时的初始秒数。counter是一个响应式引用，用于存储倒计时的当前值。start函数用于开始倒计时。stop函数用于停止倒计时，并清除计时器。reset函数用于停止当前的倒计时（如果正在运行）并将counter重置为指定的秒数（默认为初始秒数）。注意这里没有重新开始倒计时，如果你希望在重置后立即开始，可以在reset函数的最后调用start()。- 使用
onUnmounted生命周期钩子来确保在组件卸载时停止倒计时，防止内存泄漏。 - 在组件中，我们使用
useCountdown来获取counter、start、stop和reset，并在模板中显示倒计时和添加相应的按钮来控制倒计时。
翻译
搜索
复制
<iframe></iframe> 标签：web,const,ssts,hospital,counter,stop,倒计时,start,useCountdown From： https://www.cnblogs.com/lizhigang/p/18036180