TOtpCountdown / OTP 倒计时
OtpCountdown displays a visual countdown for OTP verification. Supports ring/sector variants, gradient/segment color modes, and tick/finish events. / OTP 倒计时展示验证码倒计时动画,支持圆环/扇形变体、渐变/分段颜色模式,以及滴答/完成事件。
Props / 属性
| Prop | Type | Default | Description |
|---|---|---|---|
totalSeconds | number | 30 | Total countdown seconds |
size | number | 60 | Circle size (px) |
variant | 'ring' | 'sector' | 'ring' | Visual variant |
showSeconds | boolean | true | Show remaining seconds |
Events / 事件
| Event | Payload | Description |
|---|---|---|
@finish | — | Countdown finished |
@tick | remaining: number | Each second |
Basic Usage / 基础用法
vue
<script setup lang="ts">
import { TOtpCountdown } from '@gulcc/tabler-vue'
function onFinish() { /* refresh code */ }
</script>
<template>
<TOtpCountdown :total-seconds="30" @finish="onFinish" />
</template>