May 07, 2021 Vant
import Vue from 'vue';
import { CountDown } from 'vant';
Vue.use(CountDown);
The time property represents the total countdown time in milliseconds
<van-count-down :time="time" />
export default {
data() {
return {
time: 30 * 60 * 60 * 1000
};
}
}
Set the contents of the countdown text with the format property
<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
Countdown is rendered by default once per second, and setting the millisecond property turns on millisecond rendering
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
The timeData object format can be found in the table below, which customizes the style of the countdown through the slot
<van-count-down :time="time">
<template v-slot="timeData">
<span class="item">{{ timeData.hours }}</span>
<span class="item">{{ timeData.minutes }}</span>
<span class="item">{{ timeData.seconds }}</span>
</template>
</van-count-down>
<style>
.item {
display: inline-block;
width: 22px;
margin-right: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
</style>
After you get the component instance from ref, you can call the start, pause, reset methods
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="finish"
/>
<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 { Toast } from 'vant';
export default {
methods: {
start() {
this.$refs.countDown.start();
},
pause() {
this.$refs.countDown.pause();
},
reset() {
this.$refs.countDown.reset();
},
finish() {
Toast('倒计时结束');
}
}
}
Parameters | Description | Type | The default |
---|---|---|---|
time | Countdown length, in milliseconds | number | string |
0
|
format | The time format | string |
HH:mm:ss
|
auto-start | Whether to start the countdown automatically | boolean |
true
|
millisecond | Whether to turn on millisecond rendering | boolean |
false
|
Format | Description |
---|---|
Dd | Days |
HH | Hours |
Mm | Minutes |
Ss | The number of seconds |
S | Milliseconds (1 bit) |
Ss | milliseconds (2 bits) |
Sss | milliseconds (3 bits) |
The name of the event | Description | Callback parameters |
---|---|---|
finish | The countdown is triggered at the end | - |
change
v2.4.4
|
Triggered when the countdown changes | timeData |
Name | Description | SlotProps |
---|---|---|
default | Custom content | timeData |
Name | Description | Type |
---|---|---|
days | The number of days remaining | number |
hours | The remaining hours | number |
minutes | The remaining minutes | number |
seconds | The number of seconds remaining | number |
milliseconds | The remaining milliseconds | number |
Ref allows you to get to the CountDown instance and call the instance method, as detailed in the component instance method
The method name | Description | Parameters | Returns a value |
---|---|---|---|
start | Start the countdown | - | - |
pause | Pause the countdown | - | - |
reset |
Reset the countdown, and if
auto-start
true
countdown starts automatically after the reset
|
- | - |
If you're having trouble counting down on iOS that doesn't work, make sure you didn't create the Date object with a writing like new Date ('2020-01-01'), iOS doesn't support a date format separated by a midscore, and the correct write is new Date ('2020/01/01').
A detailed explanation of this problem: stackoverflow .