CountDown 倒计时

介绍

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

基础用法

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

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

import { ref } from 'vue';
const time = ref(30 * 60 * 60 * 1000)

自定义格式

通过 format 属性设置倒计时文本的内容。

<z-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />

毫秒级渲染

倒计时默认每秒渲染一次，设置 millisecond 属性可以开启毫秒级渲染。

<z-count-down millisecond :time="time" format="HH:mm:ss:SS" />

自定义样式

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

<z-count-down :time="time">
  <template #default="{ current }">
    <text class="block">{{ current.hours }}</text>
    <text class="colon">:</text>
    <text class="block">{{ current.minutes }}</text>
    <text class="colon">:</text>
    <text class="block">{{ current.seconds }}</text>
  </template>
</z-count-down>

<style>
  .colon {
    display: inline-block;
    margin: 0 8rpx;
    color: var(--z-primary-color);
  }

  .block {
    display: inline-block;
    width: 44rpx;
    font-size: 24rpx;
    color: #fff;
    text-align: center;
    background-color: var(--z-primary-color);
    border-radius: 8rpx;
  }
</style>

手动控制

通过 ref 获取到组件实例后，可以调用 start、pause、reset 方法。

<view class="count-content">
  <z-count-down
    ref="countDown"
    millisecond
    :time="3000"
    :auto-start="false"
    format="ss:SSS"
    @finish="onFinish"
  />
</view>
<z-grid clickable :column-num="3">
  <z-grid-item icon="play-circle" text="开始" @click="start" />
  <z-grid-item icon="timeout" text="暂停" @click="pause" />
  <z-grid-item icon="reload" text="重置" @click="reset" />
</z-grid>

import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const countDown = ref()
const start = () => {
  countDown.value?.start()
}
const pause = () => {
  countDown.value?.pause()
}
const reset = () => {
  countDown.value?.reset()
}
const onFinish = () => toast.showToast('倒计时结束')

Props

format 格式

Events

Slots

CurrentTime 格式

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法。

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。