vant/src/count-down

CountDown

Install

import Vue from 'vue';
import { CountDown } from 'vant';

Vue.use(CountDown);

Usage

Basic Usage

<van-count-down :time="time" />

export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
    };
  },
};

Custom Format

<van-count-down :time="time" format="DD Day, HH:mm:ss" />

Millisecond

<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />

Custom Style

<van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>

<style>
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
</style>

Manual Control

<van-count-down
  ref="countDown"
  millisecond
  :time="3000"
  :auto-start="false"
  format="ss:SSS"
  @finish="finish"
/>
<van-grid clickable :column-num="3">
  <van-grid-item text="Start" icon="play-circle-o" @click="start" />
  <van-grid-item text="Pause" icon="pause-circle-o" @click="pause" />
  <van-grid-item text="Reset" 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('Finished');
    },
  },
};

API

Props

Attribute	Description	Type	Default
time	Total time	number | string	0
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	Triggered when count down finished	-
change v2.4.4	Triggered when count down changed	timeData: TimeData

Slots

Name	Description	SlotProps
default	Custom Content	timeData: TimeData

TimeData Structure

Name	Description	Type
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	-	-