用于实时展示倒计时数值,支持毫秒精度。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from 'vue';
import { CountDown } from 'vant';
const app = createApp();
app.use(CountDown);
time 属性表示倒计时总时长,单位为毫秒。
<van-count-down :time="time" />
import { ref } from 'vue';
export default {
setup() {
const time = ref(30 * 60 * 60 * 1000);
return { time };
},
};
通过 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 #default="timeData">
<span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template>
</van-count-down>
<style>
.colon {
display: inline-block;
margin: 0 4px;
color: #ee0a24;
}
.block {
display: inline-block;
width: 22px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #ee0a24;
}
</style>
通过 ref 获取到组件实例后,可以调用 start、pause、reset 方法。
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="onFinish"
/>
<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 {
setup() {
const countDown = ref(null);
const start = () => {
countDown.value.start();
};
const pause = () => {
countDown.value.pause();
};
const reset = () => {
countDown.value.reset();
};
const onFinish = () => Toast('倒计时结束');
return {
start,
pause,
reset,
onFinish,
countDown,
};
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
time | 倒计时时长,单位毫秒 | number | string |
|
format | 时间格式 | string |
|
auto-start | 是否自动开始倒计时 | boolean |
|
millisecond | 是否开启毫秒级渲染 | boolean |
|
格式 | 说明 |
---|---|
DD | 天数 |
HH | 小时 |
mm | 分钟 |
ss | 秒数 |
S | 毫秒(1 位) |
SS | 毫秒(2 位) |
SSS | 毫秒(3 位) |
事件名 | 说明 | 回调参数 |
---|---|---|
finish | 倒计时结束时触发 | - |
change | 倒计时变化时触发 | currentTime: CurrentTime |
名称 | 说明 | 参数 |
---|---|---|
default | 自定义内容 | currentTime: CurrentTime |
名称 | 说明 | 类型 |
---|---|---|
total | 剩余总时间(单位毫秒) | number |
days | 剩余天数 | number |
hours | 剩余小时 | number |
minutes | 剩余分钟 | number |
seconds | 剩余秒数 | number |
milliseconds | 剩余毫秒 | number |
通过 ref 可以获取到 CountDown 实例并调用实例方法,详见组件实例方法。
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
start | 开始倒计时 | - | - |
pause | 暂停倒计时 | - | - |
reset | 重设倒计时,若 auto-start 为 true ,重设后会自动开始倒计时 | - | - |
通过 CountDownInstance 获取 CountDown 实例的类型定义。
import { ref } from 'vue';
import type { CountDownInstance } from 'vant';
const countDownRef = ref<CountDownInstance>();
countDownRef.value?.start();
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-count-down-text-color | var(--van-text-color) | - |
--van-count-down-font-size | var(--van-font-size-md) | - |
--van-count-down-line-height | var(--van-line-height-md) | - |
如果你遇到了在 iOS 上倒计时不生效的问题,请确认在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是new Date('2020/01/01')。
对此问题的详细解释:stackoverflow。