vant-CountDown 倒计时（vue按钮倒计时5秒后可用）

引入

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

手动控制

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

Props

参数说明类型默认值time倒计时时长，单位毫秒number | string0format时间格式stringHH:mm:ssauto-start是否自动开始倒计时booleantruemillisecond是否开启毫秒级渲染booleanfalse

format 格式

格式说明DD天数HH小时mm分钟ss秒数S毫秒（1 位）SS毫秒（2 位）SSS毫秒（3 位）

Events

事件名说明回调参数finish倒计时结束时触发-change v2.4.4倒计时变化时触发timeData: TimeData

Slots

名称说明SlotPropsdefault自定义内容timeData: TimeData

TimeData 格式

名称说明类型days剩余天数numberhours剩余小时numberminutes剩余分钟numberseconds剩余秒数numbermilliseconds剩余毫秒number

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法，详见组件实例方法

方法名说明参数返回值start开始倒计时--pause暂停倒计时--reset重设倒计时，若auto-start为true，重设后会自动开始倒计时--