Vant CountDown 倒计时的效果组件库

发布时间：2023-04-20 12:40:29 所属栏目：教程来源：

导读：Vant CountDown 组件是实现移动端倒计时的效果组件库。主要用于电商抢购倒计时这类UI功能支持。

引入
import Vue from 'vue';
import { CountDown } from 'vant';

Vue.use(CountDown);
基

Vant CountDown 组件是实现移动端倒计时的效果组件库。主要用于电商抢购倒计时这类UI功能支持。

引入
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="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 获取到组件实例后，可以调用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 | string   0
format   时间格式   string   HH:mm:ss
auto-start   是否自动开始倒计时   boolean   true
millisecond   是否开启毫秒级渲染   boolean   false

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!