介绍
提供倒计时管理能力。
代码演示
基本用法
<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 |