Vant4 CountDown 倒计时

介绍

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

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from vue;
import { CountDown } from vant;

const app = createApp();
app.use(CountDown);

代码演示

基础用法

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

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

import { ref } from vue;

export default {
  setup() {
    const time = ref(30 * 60 * 60 * 1000);
    return { time };
  },
};

自定义格式

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

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

毫秒级渲染

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

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

自定义样式

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

<van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>

<style>
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
</style>

手动控制

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

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

import { showToast } from vant;

export default {
  setup() {
    const countDown = ref(null);

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

    return {
      start,
      pause,
      reset,
      onFinish,
      countDown,
    };
  },
};

API

Props

format 格式

Events

Slots

CurrentTime 格式

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法，详见组件实例方法。

类型定义

组件导出以下类型定义：

import type {
  CountDownProps,
  CountDownInstance,
  CountDownCurrentTime,
} from vant;

​CountDownInstance​ 是组件实例的类型，用法如下：

import { ref } from vue;
import type { CountDownInstance } from vant;

const countDownRef = ref<CountDownInstance>();

countDownRef.value?.start();

主题定制

样式变量

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

常见问题

在 iOS 系统上倒计时不生效？

如果你遇到了在 iOS 上倒计时不生效的问题，请确认在创建 Date 对象时没有使用​new Date(2020-01-01)​这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是​new Date(2020/01/01)​。

对此问题的详细解释：stackoverflow。