Vant3 中文入门教程 Vant3 useCountDown

2024-02-25 开发教程 Vant3 中文入门教程 匿名 1

介绍

提供倒计时管理能力。

代码演示

基本用法

<span>总时间:{{ current.total }}</span>
<span>剩余天数:{{ current.days }}</span>
<span>剩余小时:{{ current.hours }}</span>
<span>剩余分钟:{{ current.minutes }}</span>
<span>剩余秒数:{{ current.seconds }}</span>
<span>剩余毫秒:{{ current.milliseconds }}</span>
import { useCountDown } from '@vant/use';
export default {
setup() {
const countDown = useCountDown({
// 倒计时 24 小时
time: 24 * 60 * 60 * 1000,
});
// 开始倒计时
countDown.start();
return {
current: countDown.current,
};
},
};

毫秒级渲染

倒计时默认每秒渲染一次,设置 millisecond 选项可以开启毫秒级渲染。

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;

参数

参数说明类型默认值
time倒计时时长,单位毫秒number -
millisecond是否开启毫秒级渲染boolean false
onChange倒计时改变时触发的回调函数(current: CurrentTime) => void -
onFinish倒计时结束时触发的回调函数-

返回值

参数说明类型
current当前剩余的时间CurrentTime
start开始倒计时() => void
pause暂停倒计时() => void
reset重置倒计时,支持传入新的倒计时时长(time?: number): void

CurrentTime 格式

名称说明类型
total剩余总时间(单位毫秒)number
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number