更新记录

1.0.0（2026-10-08）下载此版本

首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(4.13)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
-	-	√	√	√	√	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	-	√	√	-	-	-

e-countdown 倒计时

倒计时组件，支持目标时间与剩余秒数两种入参，适合秒杀、验证码、活动倒计时等场景。

特性

支持目标时间戳与剩余秒数两种入参
自动拆解为天/时/分/秒
天/单位/分隔符均可自由开关
支持暂停、重置、结束回调
抗时间漂移：App 切后台后恢复仍能对齐真实剩余时间

基本用法

<template>
  <view>
    <!-- 用剩余秒数 -->
    <e-countdown :seconds="3661" show-unit :font-size="40" :show-colon="false" />

    <!-- 用目标时间戳 -->
    <e-countdown :timestamp="endTime" />

    <!-- 自定义插槽：完全控制渲染 -->
    <e-countdown :seconds="60" @timeup="onTimeup">
      <template #default="{ timeData }">
        <text class="my-num">{{ timeData.s }}</text>
        <text> 秒后重发</text>
      </template>
    </e-countdown>
  </view>
</template>

<script>
export default {
  data() {
    return {
      endTime: Date.now() + 3600 * 1000
    }
  },
  methods: {
    onTimeup() {
      uni.showToast({ title: '活动已结束', icon: 'none' })
    }
  }
}
</script>

属性

属性名	类型	默认值	说明
`timestamp`	Number \| String	`0`	目标时间戳（毫秒），优先级高于 `seconds`
`seconds`	Number \| String	`0`	剩余秒数，`timestamp` 未提供时生效
`showDays`	Boolean	`true`	是否显示天数（仅当天数 > 0 时渲染）
`showUnit`	Boolean	`false`	是否显示单位文字（时/分/秒）
`showColon`	Boolean	`true`	是否显示冒号分隔符
`colon`	String	`:`	分隔符内容
`color`	String	`#dd524d`	数字颜色
`subColor`	String	`#909399`	单位/分隔符颜色
`fontSize`	Number	`32`	字号（rpx）
`autoStart`	Boolean	`true`	是否自动开始计时

插槽

默认插槽接收两个作用域参数：

参数	类型	说明
`timeData`	Object	`{ d, h, m, s }` 天时分秒数值
`formatted`	String	格式化字符串，如 `00:01:01:01`

事件

事件名	说明	回调参数
`timeup`	倒计时结束时触发	—
`change`	每次时间变化时触发	`{ d, h, m, s, formatted }`

方法

通过 ref 调用：

<e-countdown ref="cd" :seconds="60" />

<script>
export default {
  methods: {
    restart() {
      this.$refs.cd.reset(true)  // 重置并重新开始
    },
    stop() {
      this.$refs.cd.pause()     // 暂停
    },
    go() {
      this.$refs.cd.start()     // 继续
    }
  }
}
</script>

实现说明

为什么不用「每秒减 1」？

朴素的累加式倒计时（setInterval 内 remaining -= 1000）在 App 切后台、小程序被系统挂起后会出现明显漂移——setInterval 在挂起期间不会执行，恢复后累计误差可能达到数十秒。

本组件每次 tick 都用 Date.now() 与目标时间重新做差，即使被挂起，恢复后也能立刻对齐真实剩余时间。这也是为什么推荐优先用 timestamp 而不是 seconds。

seconds 模式的精度

seconds 模式没有绝对目标时间，只能用「上次剩余 - 真实间隔耗时」的方式递减。这里用的是实际经过的毫秒数（而非固定 1000），所以仍然比朴素累加准确。

使用提示

重置倒计时

连续改变 seconds 值不会触发重新计时（避免 watch 抖动）。需要重置时调用 reset(true)，或给组件加 :key 后改变 key 值强制重建。

时分秒为什么要 tabular-nums

数字部分设置了 font-variant-numeric: tabular-nums（等宽数字）与 min-width: 2ch，否则字符宽度不一致会导致倒计时过程里数字左右抖动。

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

纯前端渲染组件，不申请任何权限，不采集、不上传任何数据。