Vant3 CountDown 倒計(jì)時(shí)

介紹

用于實(shí)時(shí)展示倒計(jì)時(shí)數(shù)值，支持毫秒精度。

實(shí)例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎(chǔ)用法

time 屬性表示倒計(jì)時(shí)總時(shí)長，單位為毫秒。

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

import { ref } from 'vue';

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

自定義格式

通過 format 屬性設(shè)置倒計(jì)時(shí)文本的內(nèi)容。

<van-count-down :time="time" format="DD 天 HH 時(shí) mm 分 ss 秒" />

毫秒級渲染

倒計(jì)時(shí)默認(rèn)每秒渲染一次，設(shè)置 millisecond 屬性可以開啟毫秒級渲染。

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

自定義樣式

通過插槽自定義倒計(jì)時(shí)的樣式，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: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
</style>

手動控制

通過 ref 獲取到組件實(shí)例后，可以調(diào)用 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 { Toast } 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 = () => Toast('倒計(jì)時(shí)結(jié)束');

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

API

Props

format 格式

Events

Slots

CurrentTime 格式

方法

通過 ref 可以獲取到 CountDown 實(shí)例并調(diào)用實(shí)例方法，詳見組件實(shí)例方法。

類型定義

通過 CountDownInstance 獲取 CountDown 實(shí)例的類型定義。

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

const countDownRef = ref<CountDownInstance>();

countDownRef.value?.start();

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。

常見問題

在 iOS 系統(tǒng)上倒計(jì)時(shí)不生效？

如果你遇到了在 iOS 上倒計(jì)時(shí)不生效的問題，請確認(rèn)在創(chuàng)建 Date 對象時(shí)沒有使用new Date('2020-01-01')這樣的寫法，iOS 不支持以中劃線分隔的日期格式，正確寫法是new Date('2020/01/01')。

對此問題的詳細(xì)解釋：stackoverflow。