CountDown 倒计时

倒计时组件,支持自定义格式化

倒计时组件,支持自定义格式化

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-count-down class="demo-count-down-basic" :time="3600000" />
  <re-count-down class="demo-count-down-short" :time="60000" />

<!-- 格式化 -->
  <re-count-down class="demo-count-down-hms" :time="3661000" format="HH:mm:ss" />
  <re-count-down class="demo-count-down-ms" :time="3661000" format="mm:ss" />
  <re-count-down class="demo-count-down-days" :time="90000000" format="DD天HH:mm:ss" />

<!-- 自动开始 -->
  <re-count-down class="demo-count-down-auto" :time="3600000" :autoStart="true" />
  <re-count-down class="demo-count-down-no-auto" :time="3600000" :autoStart="false" />

<!-- 毫秒级 -->
  <re-count-down class="demo-count-down-ms-precision" :time="3600000" :millisecond="true" format="HH:mm:ss:SSS" />

<!-- 不同时长 -->
  <re-count-down class="demo-count-down-1s" :time="1000" />
  <re-count-down class="demo-count-down-1m" :time="60000" />
  <re-count-down class="demo-count-down-1h" :time="3600000" />
  <re-count-down class="demo-count-down-1d" :time="86400000" />

<!-- 自定义样式 -->
  <re-count-down class="demo-count-down-custom-style" :time="3600000" customStyle="font-size: 20px; color: #e34d59;" />

<!-- 零时长 -->
  <re-count-down class="demo-count-down-zero" :time="0" />

<!-- 长时长 -->
  <re-count-down class="demo-count-down-long" :time="864000000" format="DD天HH:mm:ss" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-count-down />。

API

CountDown Props

名称类型默认值描述必传
timenumber0倒计时时长(毫秒)N
formatstring"HH:mm:ss"时间格式化字符串N
autoStartbooleantrue是否自动开始倒计时N
millisecondbooleanfalse是否开启毫秒级渲染N
customStylestring""自定义样式N

CountDown Events

名称参数描述
changevalue: number值变化时触发
finish-完成时触发
pause-暂停时触发
reset-重置时触发

CountDown Slots

名称描述
--