vue实现倒计时组件
Vue 倒计时组件实现
核心思路
通过 setInterval 或 setTimeout 实现时间递减，结合 Vue 的响应式数据更新 UI。需注意组件销毁时清除定时器。
基础实现方案
模板部分
<template>
<div class="countdown">
{{ formattedTime }}
</div>
</template>脚本部分
<script>
export default {
props: {
targetTime: { type: [Date, Number], required: true }, // 目标时间戳或Date对象
format: { type: String, default: 'HH:mm:ss' } // 时间格式
},
data() {
return {
remainingTime: 0,
timer: null
};
},
computed: {
formattedTime() {
const hours = Math.floor(this.remainingTime / 3600);
const minutes = Math.floor((this.remainingTime % 3600) / 60);
const seconds = this.remainingTime % 60;
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
},
mounted() {
this.startCountdown();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
startCountdown() {
const targetTimestamp = this.targetTime instanceof Date ?
Math.floor(this.targetTime.getTime() / 1000) :
Math.floor(this.targetTime / 1000);
this.timer = setInterval(() => {
const now = Math.floor(Date.now() / 1000);
this.remainingTime = Math.max(0, targetTimestamp - now);
if (this.remainingTime <= 0) {
clearInterval(this.timer);
this.$emit('finish');
}
}, 1000);
}
}
};
</script>优化方向
自动销毁处理
添加 autoDestroy 属性控制倒计时结束后是否自动销毁组件：
props: {
autoDestroy: { type: Boolean, default: false }
},
methods: {
// 在定时器结束逻辑中追加
if (this.remainingTime <= 0 && this.autoDestroy) {
this.$destroy();
}
}动态格式支持
扩展 format 属性支持更灵活的显示格式：
formattedTime() {
const replacements = {
'HH': Math.floor(this.remainingTime / 3600).toString().padStart(2, '0'),
'mm': Math.floor((this.remainingTime % 3600) / 60).toString().padStart(2, '0'),
'ss': (this.remainingTime % 60).toString().padStart(2, '0')
};
return this.format.replace(/HH|mm|ss/g, match => replacements[match]);
}暂停/继续功能
添加控制方法：
methods: {
pause() {
clearInterval(this.timer);
this.timer = null;
},
resume() {
if (!this.timer) this.startCountdown();
}
}使用示例
基本调用
<Countdown :targetTime="new Date('2023-12-31 23:59:59')" @finish="handleFinish" />自定义格式
<Countdown
:targetTime="1672502400000"
format="还剩HH小时mm分钟"
/>注意事项
- 服务端渲染（SSR）环境下需使用
mounted而非created启动定时器 - 时区问题建议统一使用 UTC 时间戳处理
- 高频更新场景可考虑使用
requestAnimationFrame替代setInterval
