CountDown 倒计时

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

导入

import CountDown from '@/components/display/countdown/CountDown.vue';

使用方法

基础用法

<template>
  <CountDown :time="1 * 60 * 60 * 1000" />
</template>

自定义格式

<template>
  <CountDown :time="72 * 60 * 60 * 1000" format="DD 天 HH 时 mm 分 ss 秒" />
</template>

毫秒级渲染

<template>
  <CountDown :time="1 * 60 * 60 * 1000" millisecond format="HH:mm:ss:SS" />
</template>

自定义渲染

<template>
  <CountDown :time="1 * 60 * 60 * 1000">
    <template #renderText="{ time }">
      <FlexRow center>
        <text :style="{ backgroundColor: '#f00', color: '#fff', padding: '10rpx' }">{{time.hours}}</text>
        <text :style="{ margin: '0 8px' }">:</text>
        <text :style="{ backgroundColor: '#f00', color: '#fff', padding: '10rpx' }">{{time.minutes}}</text>
        <text :style="{ margin: '0 8px' }">:</text>
        <text :style="{ backgroundColor: '#f00', color: '#fff', padding: '10rpx' }">{{time.seconds}}</text>
      </FlexRow>
    </template>
  </CountDown>
</template>

手动控制

<template>
  <CountDown ref="countdownRef" :time="1 * 60 * 60 * 1000" />
  <Button @click="countdownRef.start()" type="primary" text="开始" />
  <Button @click="countdownRef.stop()" type="default" text="暂停" />
  <Button @click="countdownRef.reset()" type="default" text="重置" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const countdownRef = ref();
</script>

API 参考

Props

名称	说明	类型	必填	默认值
time	倒计时时长，单位毫秒	number	否	0
format	时间格式	string	否	'HH:mm:ss'
autoStart	是否自动开始倒计时	boolean	否	true
millisecond	是否开启毫秒级渲染	boolean	否	false

Slots

名称	说明	参数
renderText	自定义倒计时显示内容	{ time: { days: number, hours: number, minutes: number, seconds: number, milliseconds: number } }

Events

名称	说明	参数
finish	倒计时结束事件	-

实例方法

通过 ref 可以获取到 CountDown 实例并调用实例方法

方法名	说明	参数
start	开始倒计时	-
stop	暂停倒计时	-
reset	重置倒计时	time?: number