CountDown - Vant 4

CountDown

Intro

Used to display the countdown value in real time, and precision supports milliseconds.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { CountDown } from'vant'; const app = createApp(); app.use(CountDown);

Usage

Basic Usage

import { ref } from'vue'; exportdefault { setup() { const time = ref(30 * 60 * 60 * 1000); return { time }; }, };

Custom Format

Millisecond

Custom Style

Manual Control

import { showToast } from'vant'; exportdefault { setup() { const countDown = ref(null); conststart = () => { countDown.value.start(); }; constpause = () => { countDown.value.pause(); }; constreset = () => { countDown.value.reset(); }; constonFinish = () => showToast('Finished'); return { start, pause, reset, onFinish, countDown, }; }, };

API

Props

Attribute	Description	Type	Default
time	Total time, unit milliseconds	*number	string*
format	Time format	string	HH:mm:ss
auto-start	Whether to auto start count down	boolean	true
millisecond	Whether to enable millisecond render	boolean	false

Available formats

Format	Description
DD	Day
HH	Hour
mm	Minute
ss	Second
S	Millisecond, 1-digit
SS	Millisecond, 2-digits
SSS	Millisecond, 3-digits

Events

Event	Description	Arguments
finish	Emitted when count down finished	-
change	Emitted when count down changed	currentTime: CurrentTime

Slots

Name	Description	SlotProps
default	Custom Content	currentTime: CurrentTime

CurrentTime Structure

Name	Description	Type
total	Total time, unit milliseconds	number
days	Remain days	number
hours	Remain hours	number
minutes	Remain minutes	number
seconds	Remain seconds	number
milliseconds	Remain milliseconds	number

Methods

Use ref to get CountDown instance and call instance methods.

Name	Description	Attribute	Return value
start	Start count down	-	-
pause	Pause count down	-	-
reset	Reset count down	-	-

Types

The component exports the following type definitions:

importtype { CountDownProps, CountDownInstance, CountDownCurrentTime, } from'vant';

CountDownInstance is the type of component instance:

import { ref } from'vue'; importtype { CountDownInstance } from'vant'; const countDownRef = ref<CountDownInstance>(); countDownRef.value?.start();

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--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)	-