引入import Vue from 'vue';

import { CountDown } from 'vant';

Vue.use(CountDown);

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒export default {

data() {

return {

time: 30 * 60 * 60 * 1000

};

}

}

自定义格式

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

毫秒级渲染

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

自定义样式

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

{{ timeData.hours }}

{{ timeData.minutes }}

{{ timeData.seconds }}

.item {

display: inline-block;

width: 22px;

margin-right: 5px;

color: #fff;

font-size: 12px;

text-align: center;

background-color: #1989fa;

}

手动控制

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

ref="countDown"

millisecond

:time="3000"

:auto-start="false"

format="ss:SSS"

@finish="finish"

/>

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

format时间格式stringHH:mm:ss

auto-start是否自动开始倒计时booleantrue

millisecond是否开启毫秒级渲染booleanfalse

format 格式格式说明DD天数

HH小时

mm分钟

ss秒数

S毫秒(1 位)

SS毫秒(2 位)

SSS毫秒(3 位)

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

change v2.4.4倒计时变化时触发timeData

Slots名称说明SlotPropsdefault自定义内容timeData

timeData 格式名称说明类型days剩余天数number

hours剩余小时number

minutes剩余分钟number

seconds剩余秒数number

milliseconds剩余毫秒number

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法，详见 组件实例方法方法名说明参数返回值start开始倒计时--

pause暂停倒计时--

reset重设倒计时，若auto-start为true，重设后会自动开始倒计时--

常见问题

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

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