引入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')。