Vant CountDown 组件是实现移动端倒计时的组件库。主要用于电商抢购倒计时这类UI。

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

Vue.use(CountDown);

time表示倒计时总时长，单位为毫秒

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

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

通过format设置倒计时文本的

<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />

倒计时认每秒渲染一次，设置millisecond可以开启毫秒级渲染

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

通过插槽倒计时的样式，timeData对象格式见下方表格

<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>

通过 ref 到组件实例后，可以start、pause、reset

<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('倒计时结束');
    }
  }
}

API

通过 ref 可以到 CountDown 实例并实例，详见 

常见问题

如果你遇到了在 iOS 上倒计时不生效的问题，请确认在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法，iOS 以中划线分隔的日期格式，正确写法是new Date('2020/01/01')。

对此问题的详细解释：。

演示