Countdown 倒计时

电商大促与限时秒杀倒计时组件，支持 4 种精工视觉形态（badge 红块、simple 冒号、round 胶囊、card Bento 卡片）、毫秒高频跑动、自适应后台唤醒校准与编程式控制。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <!-- 设置 3600 秒 (1 小时) 倒计时 -->
  <mu-countdown :time="3600" />
</template>

---

2. 4 种视觉形态 (4 Variants)

通过 variant 属性在 badge（大促红块）、simple（纯文字冒号）、round（黑金胶囊）与 card（Bento 冰晶）之间切换。

<template>
  <mu-countdown :time="3600" variant="badge" />
  <mu-countdown :time="3600" variant="simple" />
  <mu-countdown :time="3600" variant="round" />
  <mu-countdown :time="3600" variant="card" />
</template>

---

3. 中文单位与毫秒跑动 (Unit & Millisecond)

设置 unit-type="text" 展示“时分秒”，millisecond 开启百/十毫秒高频平滑跑动。

<template>
  <mu-countdown :time="86400" unit-type="text" variant="simple" />
  <mu-countdown :time="60" millisecond variant="badge" />
</template>

---

4. 编程式控制 (Expose Methods)

通过组件 ref 实例调用 start()、pause() 与 reset() 方法：

<template>
  <mu-countdown ref="countdownRef" :time="120" :auto-start="false" @finish="onFinish" />
  <button @click="countdownRef?.start()">开始</button>
  <button @click="countdownRef?.pause()">暂停</button>
  <button @click="countdownRef?.reset()">重置</button>
</template>

<script setup>
import { ref } from 'vue'

const countdownRef = ref(null)

function onFinish() {
  console.log('倒计时已结束！')
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
time	剩余时间（秒数，或大于 100000 标识的毫秒数）	Number | String	-	0
endTime	目标结束时间戳或时间字符串 (如 '2026-12-31 23:59:59')	Number | String	-	''
variant	视觉形态风格	String	badge | simple | round | card	'badge'
autoStart	是否自动开启倒计时	Boolean	true | false	true
showDay	是否显示天数	Boolean	true | false	true
showHour	是否显示小时	Boolean	true | false	true
showMinute	是否显示分钟	Boolean	true | false	true
showSecond	是否显示秒数	Boolean	true | false	true
unitType	分隔符号类型	String	colon (冒号 😃 | text (时分秒)	'colon'
millisecond	是否显示毫秒跑动	Boolean	true | false	false
color	自定义数字颜色	String	-	''
bgColor	自定义数字块背景色	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
change	每秒或每 30ms 计时更新时触发	(timeData: { days, hours, minutes, seconds, milliseconds })
finish	倒计时结束归零时触发	-

---

实例方法 (Expose Methods)

方法名	说明
start()	开始 / 恢复倒计时
pause()	暂停倒计时
reset()	重置并重新计时

---

插槽说明 (Slots)

插槽名	说明	作用域参数
default	自定义倒计时模板插槽	{ days, hours, minutes, seconds, milliseconds }