guide.md 1.6 KB

基本用法

通过 time 属性设置倒计时总时长,单位为毫秒。组件默认会自动开始倒计时。

自定义格式

通过 format 属性设置倒计时的显示格式,支持以下占位符:

  • DD:天数
  • HH:小时(自动补零)
  • mm:分钟(自动补零)
  • ss:秒数(自动补零)
  • SSS:毫秒(3 位)
  • SS:毫秒(2 位)
  • S:毫秒(1 位)

如果格式中不包含 DD,天数会自动累加到小时中。

毫秒级渲染

设置 millisecond 属性可以开启毫秒级渲染,此时组件会以更高的频率更新显示内容。

注意:开启毫秒级渲染会增加性能开销,请根据实际需求使用。

手动控制

设置 autoStartfalse 可以禁用自动开始。通过 bind:this 获取组件实例后,可以调用以下方法手动控制倒计时:

  • start():开始倒计时
  • pause():暂停倒计时
  • reset(time?):重置倒计时,可选传入新的时间

自定义样式

通过 children Snippet 可以完全自定义倒计时的显示内容。Snippet 会接收一个 TimeData 对象作为参数,包含 dayshoursminutessecondsmilliseconds 属性。

事件回调

  • onfinish:倒计时结束时触发
  • onchange:倒计时变化时触发,参数为当前的 TimeData 对象

页面可见性处理

组件内部使用 requestAnimationFrame 实现精准计时,并监听页面可见性变化。当页面切换到后台时,倒计时会自动校准,确保计时准确。

CSS 注入

通过 injClass 参数可以向 CountDown 组件注入 CSS 类名,实现更多自定义样式。