shop-wx/doc/wot-design-uni/docs/component/count-down.md

CountDown 倒计时

用于实时展示倒计时数值，支持毫秒精度。

基础用法

time 属性表示倒计时总时长，单位为毫秒。

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

const time = ref<number>(30 * 60 * 60 * 1000)

自定义格式

format 属性表示倒计时格式，支持自定义。

<wd-count-down :time="time" :format="format" />

const format = ref<string>('DD 天 HH 时 mm 分 ss 秒')
const time = ref<number>(30 * 60 * 60 * 1000)

毫秒级渲染

millisecond 属性表示是否开启毫秒级渲染，默认关闭。

<wd-count-down :time="time" :millisecond="true" />

const time = ref<number>(30 * 60 * 60 * 1000)

自定义样式

通过插槽自定义倒计时的样式，timeData 对象格式见下方表格。

<wd-count-down :time="time">
  <template #default="{ current }">
    <span class="custom-count-down">{{ current.hours }}</span>
    <span class="custom-count-down-colon">:</span>
    <span class="custom-count-down">{{ current.minutes }}</span>
    <span class="custom-count-down-colon">:</span>
    <span class="custom-count-down">{{ current.seconds }}</span>
  </template>
</wd-count-down>

const time = ref<number>(30 * 60 * 60 * 1000)

.custom-count-down {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #f0883a;
  border-radius: 2px;
}

.custom-count-down-colon {
  display: inline-block;
  margin: 0 4px;
  color: #f0883a;
}

手动控制

通过 start 方法开始倒计时，通过 pause 方法暂停倒计时，通过 reset 方法重置倒计时。

<wd-count-down ref="countDown" :time="3000" millisecond :auto-start="false" format="ss:SSS" @finish="onFinish"></wd-count-down>
<wd-grid clickable border>
  <wd-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
  <wd-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
  <wd-grid-item text="重置" icon="refresh" @itemclick="reset" />
</wd-grid>

const { show: showToast } = useToast()

const countDown = ref<any>(null)

const start = () => {
  countDown.value.start()
}
const pause = () => {
  countDown.value.pause()
}
const reset = () => {
  countDown.value.reset()
}
const onFinish = () => showToast('倒计时结束')

Attributes

参数	说明	类型	可选值	默认值	最低版本
time	倒计时时长，单位毫秒	Number	—	0	0.1.58
millisecond	是否开启毫秒级渲染	Boolean	—	false	0.1.58
auto-start	是否自动开始倒计时	Boolean	—	true	0.1.58
format	倒计时格式化字符串	String	—	HH:mm:ss	0.1.58

Events

事件名称	说明	参数	最低版本
finish	倒计时结束时触发	—	0.1.58
change	倒计时变化时触发	current: TimeData	0.1.58

Methods

方法名	说明	参数	最低版本
start	开始倒计时	—	0.1.58
pause	暂停倒计时	—	0.1.58
reset	重置倒计时，若 auto-start 为 true，重设后会自动开始倒计时	—	0.1.58

Slots

名称	说明	最低版本
—	默认插槽	0.1.58

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

format 格式

格式	说明
DD	天数
HH	小时
mm	分钟
ss	秒数
S	毫秒（1 位）
SS	毫秒（2 位）
SSS	毫秒（3 位）

timeData 对象

属性	说明	类型	默认值
days	天	number	-
hours	小时	number	-
minutes	分钟	number	-
seconds	秒	number	-
milliseconds	毫秒	number	-