Vant3 中文入门教程 Vant3 CountDown 倒计时

2024-02-25 开发教程 Vant3 中文入门教程匿名 1℃

介绍

用于实时展示倒计时数值，支持毫秒精度。

实例演示

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

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,
    };
  },
};

API

Props

参数	说明	类型	默认值
time	倒计时时长，单位毫秒	number \| string	`0`
format	时间格式	string	`HH:mm:ss`
auto-start	是否自动开始倒计时	boolean	`true`
millisecond	是否开启毫秒级渲染	boolean	`false`

format 格式

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

Events

事件名	说明	回调参数
finish	倒计时结束时触发	-
change	倒计时变化时触发	currentTime: CurrentTime

Slots

名称	说明	参数
default	自定义内容	currentTime: 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 系统上倒计时不生效？

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

对此问题的详细解释：stackoverflow。

上一节： Vant3 Collapse 折叠面板

下一节： Vant3 Divider 分割线

"Vant3 中文入门教程"的目录