CountDown 倒计时

引入

  1. import Vue from 'vue';
  2. import { CountDown } from 'vant';
  3. Vue.use(CountDown);

代码演示

基本用法

time属性表示倒计时总时长,单位为毫秒

  1. <van-count-down :time="time" />
  1. export default {
  2. data() {
  3. return {
  4. time: 30 * 60 * 60 * 1000
  5. };
  6. }
  7. }

自定义格式

通过format属性设置倒计时文本的内容

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

毫秒级渲染

倒计时默认每秒渲染一次,设置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 获取到组件实例后,可以调用startpausereset方法

<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-
format时间格式stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse

format 格式

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

Events

事件名说明回调参数
finish倒计时结束时触发-

Slots

名称说明SlotProps
default自定义内容timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法

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

常见问题

在 iOS 系统上倒计时不生效?

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

对此问题的详细解释:stackoverflow

CountDown 倒计时 - 图1