Vant4 CountDown 倒計時

2023-02-16 17:56 更新

介紹

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

引入

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

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

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

代碼演示

基礎(chǔ)用法

?time? 屬性表示倒計時總時長,單位為毫秒。

<van-count-down :time="time" />
import { ref } from 'vue';

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

自定義格式

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

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

毫秒級渲染

倒計時默認(rèn)每秒渲染一次,設(shè)置 ?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 獲取到組件實例后,可以調(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 { 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('倒計時結(jié)束');

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

API

Props

參數(shù) 說明 類型 默認(rèn)值
time 倒計時時長,單位毫秒 number | string 0
format 時間格式 string HH:mm:ss
auto-start 是否自動開始倒計時 boolean true
millisecond 是否開啟毫秒級渲染 boolean false

format 格式

格式 說明
DD 天數(shù)
HH 小時
mm 分鐘
ss 秒數(shù)
S 毫秒(1 位)
SS 毫秒(2 位)
SSS 毫秒(3 位)

Events

事件名 說明 回調(diào)參數(shù)
finish 倒計時結(jié)束時觸發(fā) -
change 倒計時變化時觸發(fā) currentTime: CurrentTime

Slots

名稱 說明 參數(shù)
default 自定義內(nèi)容 currentTime: CurrentTime

CurrentTime 格式

名稱 說明 類型
total 剩余總時間(單位毫秒) number
days 剩余天數(shù) number
hours 剩余小時 number
minutes 剩余分鐘 number
seconds 剩余秒數(shù) number
milliseconds 剩余毫秒 number

方法

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

方法名 說明 參數(shù) 返回值
start 開始倒計時 - -
pause 暫停倒計時 - -
reset 重設(shè)倒計時,若 auto-start 為 true,重設(shè)后會自動開始倒計時 - -

類型定義

組件導(dǎo)出以下類型定義:

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 組件。

名稱 默認(rèn)值 描述
--van-count-down-text-color var(--van-text-color) -
--van-count-down-font-size var(--van-font-size-md) -
--van-count-down-line-height var(--van-line-height-md) -

常見問題

在 iOS 系統(tǒng)上倒計時不生效?

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

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號