OtpCountdown 一次性密码倒计时

OTP 倒计时组件以 SVG 圆环 + 读秒数字展示验证码剩余有效期。进度条基于 requestAnimationFrame 驱动，色随剩余时间从青色(Teal) → 黄色 → 红色丝滑渐变。

---

基础用法

默认 30 秒倒计时，悬浮即开始。

<TOtpCountdown />

---

自定义尺寸与粗细

通过 size 和 stroke-width 调整圆环大小与线条粗细。

<TOtpCountdown :size="80" />
<TOtpCountdown :size="100" :stroke-width="8" />

---

分段颜色模式

设置 color-mode="segments"，颜色在剩余 50% 和 20% 时跳变。

<TOtpCountdown color-mode="segments" />

---

隐藏文字

设置 :show-seconds="false" 仅显示圆环，不显示数字。

<TOtpCountdown :show-seconds="false" />

---

受控模式

通过 ref 调用 pause()、resume()、reset() 方法控制倒计时。

<script setup>
const countdownRef = ref(null)
const paused = ref(false)
</script>

<TOtpCountdown ref="countdownRef" />
<button @click="countdownRef?.pause()">暂停</button>
<button @click="countdownRef?.resume()">继续</button>
<button @click="countdownRef?.reset()">重置</button>

---

自定义总时长

通过 :total-seconds 设置不同的倒计时长。

<TOtpCountdown :total-seconds="60" />
<TOtpCountdown :total-seconds="15" />

---

扇区模式

设置 variant="sector" 以饼图扇区形式展示倒计时。

<TOtpCountdown variant="sector" />
<TOtpCountdown variant="sector" :show-seconds="false" />
<TOtpCountdown variant="sector" :size="80" />

---

API

Props

属性	类型	默认值	说明
total-seconds	number	30	总倒计时长（秒）
size	number	60	圆环尺寸大小（px）
stroke-width	number	4	圆环线条粗细（px），仅 ring 模式生效
show-seconds	boolean	true	是否在圆环中心显示秒数
color-mode	'gradient' | 'segments'	'gradient'	颜色模式：丝滑渐变 / 分段跳变
variant	'ring' | 'sector'	'ring'	视觉变体：圆环 / 扇形饼图

Emits

事件	参数	说明
finish	—	倒计时结束
tick	remaining: number	每秒心跳，传出当前剩余秒数

Expose

方法	说明
pause()	暂停倒计时
resume()	继续倒计时
reset()	重置倒计时