Vant CountDown 倒计时

引入

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 | 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

名称说明SlotProps
default自定义内容timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法,详见 组件实例方法

方法名说明参数返回值
start开始倒计时
pause暂停倒计时
reset重设倒计时,若auto-starttrue,重设后会自动开始倒计时

常见问题

在 iOS 系统上倒计时不生效?

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

对此问题的详细解释:stackoverflow

实例演示

作者:terry,如若转载,请注明出处:https://www.web176.com/vant/15508.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2023年4月14日
下一篇 2023年4月14日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注