Vant4 useCountDown

2023-02-16 17:57 更新

介紹

提供倒計(jì)時管理能力。

代碼演示

基本用法

<span>總時間:{{ current.total }}</span>
<span>剩余天數(shù):{{ current.days }}</span>
<span>剩余小時:{{ current.hours }}</span>
<span>剩余分鐘:{{ current.minutes }}</span>
<span>剩余秒數(shù):{{ current.seconds }}</span>
<span>剩余毫秒:{{ current.milliseconds }}</span>
import { useCountDown } from '@vant/use';

export default {
  setup() {
    const countDown = useCountDown({
      // 倒計(jì)時 24 小時
      time: 24 * 60 * 60 * 1000,
    });

    // 開始倒計(jì)時
    countDown.start();

    return {
      current: countDown.current,
    };
  },
};

毫秒級渲染

倒計(jì)時默認(rèn)每秒渲染一次,設(shè)置 millisecond 選項(xiàng)可以開啟毫秒級渲染。

import { useCountDown } from '@vant/use';

export default {
  setup() {
    const countDown = useCountDown({
      time: 24 * 60 * 60 * 1000,
      millisecond: true,
    });
    countDown.start();

    return {
      current: countDown.current,
    };
  },
};

API

類型定義

type CurrentTime = {
  days: number;
  hours: number;
  total: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
};

type CountDown = {
  start: () => void;
  pause: () => void;
  reset: (totalTime: number) => void;
  current: ComputedRef<CurrentTime>;
};

type UseCountDownOptions = {
  time: number;
  millisecond?: boolean;
  onChange?: (current: CurrentTime) => void;
  onFinish?: () => void;
};

function useCountDown(options: UseCountDownOptions): CountDown;

參數(shù)

參數(shù) 說明 類型 默認(rèn)值
time 倒計(jì)時時長,單位毫秒 number -
millisecond 是否開啟毫秒級渲染 boolean false
onChange 倒計(jì)時改變時觸發(fā)的回調(diào)函數(shù) (current: CurrentTime) => void -
onFinish 倒計(jì)時結(jié)束時觸發(fā)的回調(diào)函數(shù) -

返回值

參數(shù) 說明 類型
current 當(dāng)前剩余的時間 CurrentTime
start 開始倒計(jì)時 () => void
pause 暫停倒計(jì)時 () => void
reset 重置倒計(jì)時,支持傳入新的倒計(jì)時時長 (time?: number): void

CurrentTime 格式

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


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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號