当前位置：首页 > news >正文

前端vue3 实现倒计时功能组件

news 来源：原创 2025/4/20 1:09:18

现在web端需要实现一个倒计时的组件现在使用的是ant-design 组件但是并没有关于倒计时的组件现在手写一个直接上代码

子组件

timer.vue

<template><span class="countdown-cell" :class="{ 'text-danger': isExpired }">{{ displayText }}</span>
</template><script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';const props = defineProps({endTime: {type: [Number, String, Date],required: true}
});const emit = defineEmits(['expired']);const now = ref(Date.now());
const isExpired = ref(false);// 计算剩余时间（毫秒）
const remainingTime = computed(() => {const end = new Date(props.endTime).getTime();return end - now.value;
});// 显示文本
const displayText = computed(() => {if (isExpired.value) return '已过期';const totalSeconds = Math.floor(remainingTime.value / 1000);if (totalSeconds <= 0) return '00:00:00';const hours = Math.floor(totalSeconds / 3600);const minutes = Math.floor((totalSeconds % 3600) / 60);const seconds = totalSeconds % 60;return [hours.toString().padStart(2, '0'),minutes.toString().padStart(2, '0'),seconds.toString().padStart(2, '0')].join(':');
});// 更新当前时间
let timer = null;
const updateNow = () => {now.value = Date.now();if (remainingTime.value <= 0 && !isExpired.value) {isExpired.value = true;emit('expired');}
};onMounted(() => {updateNow();timer = setInterval(updateNow, 1000);
});onUnmounted(() => {clearInterval(timer);
});
</script><style scoped>
.countdown-cell {font-family: monospace;
}
.text-danger {color: #f56c6c;font-weight: bold;
}
</style>

父组件中使用

   <CountdownTime:end-time="getEndTime(record.createTime)"@expired="handleExpired(record.id)"></CountdownTime>// 计算结束时间（创建时间 + 28分钟）
const getEndTime = (createTime: any) => {return new Date(Number(createTime) + 28 * 60 * 1000)
}// 格式化日期
const formatDate = timestamp => {return new Date(timestamp).toLocaleString()
}// 处理倒计时过期事件
const handleExpired = id => {console.log(`项目 ${id} 已过期`)// 可以在这里更新状态或执行其他操作
}

慢慢理解直接用就好了传递 endTime 时间比如可以使用创建时间 + 你想倒计时的时间

@expired 是倒计时结束的操作函数