您的位置:58脚本 > Vant3 CountDown 倒计时

Vant3 CountDown 倒计时

2023-05-22 00:32 Vant3中文教程

 Vant3 CountDown 倒计时

介绍

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

实例演示

引入

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

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。


阅读全文
以上是58脚本为你收集整理的 Vant3 CountDown 倒计时全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS