CountDown 倒计时

引入

基础用法

属性表示倒计时总时长，单位为毫秒。

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

自定义格式

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

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

毫秒级渲染

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

  1.   <template #default="timeData">
  2.     <span class="block">{{ timeData.hours }}</span>
  3.     <span class="colon">:</span>
  4.     <span class="block">{{ timeData.minutes }}</span>
  5.     <span class="colon">:</span>
  6.     <span class="block">{{ timeData.seconds }}</span>
  7.   </template>
  8. </van-count-down>
  10. <style>
  11.   .colon {
  12.     display: inline-block;
  13.     margin: 0 4px;
  14.     color: #ee0a24;
  16.   .block {
  17.     display: inline-block;
  18.     width: 22px;
  19.     color: #fff;
  20.     font-size: 12px;
  21.     background-color: #ee0a24;
  22.   }
  23. </style>

手动控制

通过 ref 获取到组件实例后，可以调用 start、pause、reset 方法。

  1. import { Toast } from 'vant';
  3. export default {
  4.   methods: {
  5.     start() {
  6.       this.$refs.countDown.start();
  7.     },
  8.     pause() {
  10.     },
  11.     reset() {
  12.       this.$refs.countDown.reset();
  13.     },
  14.     finish() {
  15.       Toast('倒计时结束');
  16.     },
  17.   },

Props

format 格式

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

Events

名称说明参数
default自定义内容timeData: TimeData

TimeData 格式

方法

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

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考。

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

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