封装一个vue倒计时组件

前端小菜_AS32H1

已于 2024-02-29 18:43:41 修改

阅读量252

点赞数 3

文章标签： vue.js javascript 前端

于 2024-02-29 18:41:27 首次发布

本文链接：https://blog.csdn.net/AS32H1/article/details/136378311

版权

本文介绍了如何在Vue子组件中使用ref和生命周期钩子（onMounted,onUnmounted）实现计时器功能，以及处理初次加载和再次触发时的问题，提供两种计时启动方法的比较。

摘要由CSDN通过智能技术生成

// 子组件

<template>
    <div>
        <span>{{ remainingTime }}</span>
    </div>
</template>

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

export default {
    props: {
        duration: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        const remainingTime = ref(props.duration);
        let intervalId = null;

        const startCountdown = () => {
            if (remainingTime.value > 0) {
                intervalId = setInterval(() => {
                    remainingTime.value--;
                    if (remainingTime.value <= 0) {
                        clearInterval(intervalId);
                    }
                }, 1000);
            }
        };

        onMounted(() => {
            startCountdown();
        });

        onUnmounted(() => {
            clearInterval(intervalId);
        });

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

调用子组件时传值，必须要用 v-if="show" 来触发onMounted