Uniapp Vue 实现当前日期到给定日期的倒计时组件开发

应用场景与需求分析

在移动端应用开发中，倒计时功能是常见的交互需求，例如限时促销活动、订单超时提醒、考试倒计时等场景。本文将基于 Uniapp 框架，实现一个从当前日期到给定日期的倒计时组件，支持显示 HH:mm:ss 格式的剩余时间，并具备自动更新和资源释放机制。

实现思路

1. 通过 props 接收目标时间字符串（如 ‘2024-12-31 23:59:59’）
2. 在组件挂载时启动定时器，每秒计算当前时间与目标时间的差值
3. 使用 dayjs 的 duration 方法将时间差格式化为 HH:mm:ss
4. 当时间差小于等于 0 时，清除定时器并显示 00:00:00
5. 组件销毁前清除定时器，避免内存泄漏

完整代码

<template><view class="count-down"><text>剩余时间：{{ timeData }}</text></view>
</template>
<script>
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)export default {props: {time: {type: String,default: ''}},data() {return {timeData: '00:00:00',timer: null}},mounted() {if (this.time) {this.updateTime()this.timer = setInterval(this.updateTime, 1000)}},beforeDestroy() {if (this.timer) {clearInterval(this.timer)}},methods: {updateTime() {const diff = dayjs(this.time).diff(dayjs())this.timeData =diff > 0 ? dayjs.duration(diff).format('HH:mm:ss') : '00:00:00'if (diff <= 0) {clearInterval(this.timer)}}}
}
</script><style scoped lang="scss">
.count-down {color: gold;
}
</style>

使用

  <c-count-down :time="time"></c-count-down>

效果展示