BizCountdown 倒计时文本

纯展示倒计时（与 BizCountdownButton 的验证码按钮形态互补）：目标时间戳 / 剩余时长双模式（后端返回「剩余 900 秒」直传即可）、DD/HH/mm/ss 占位格式、归零 finish 事件与结束文案、最后 60 秒红色警示、暂停 / 恢复 / 重置编程控制。轻量纯文本形态，订单支付、活动开始 / 结束、拼团截止的标准件。

基础用法

支付剩余： 00:00

活动结束： 03:25:00

距开启（带天数）： 03 天 05:00:00

最后 60 秒自动红色警示；duration 模式接口返回「剩余秒数」直传即可

duration + unit="s" 剩余秒模式；target 时间戳模式；带 DD 自动天进位。

<script setup lang="ts">
/** 基础用法：duration 剩余秒模式（订单支付倒计时）+ finish 事件 */
import { ElMessage } from 'element-plus'
import { BizCountdown } from 'vue3-ep-biz-lib'

const onFinish = (): void => {
  ElMessage.warning('订单已超时未支付，自动关闭')
}
</script>

<template>
  <div class="box">
    <div class="row">
      支付剩余：
      <BizCountdown :duration="120" unit="s" format="mm:ss" @finish="onFinish" />
    </div>
    <div class="row">
      活动结束：
      <BizCountdown :target="Date.now() + 3 * 3600 * 1000 + 25 * 60 * 1000" format="HH:mm:ss" />
    </div>
    <div class="row">
      距开启（带天数）：
      <BizCountdown :target="Date.now() + 3 * 86400 * 1000 + 5 * 3600 * 1000" format="DD 天 HH:mm:ss" />
    </div>
    <div class="tip">最后 60 秒自动红色警示；duration 模式接口返回「剩余秒数」直传即可</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.row {
  font-size: 14px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

编程控制 · tick 回调

00:00

剩余 0s（tick 事件可做轮询保活 / 二次提醒）

pause / resume / reset 编程控制；tick 每秒回调剩余毫秒（轮询保活 / 二次提醒）。

<script setup lang="ts">
/** 进阶：编程控制（暂停 / 恢复 / 重置）+ tick 轮询回调 */
import { ref } from 'vue'
import { BizCountdown } from 'vue3-ep-biz-lib'
import type { BizCountdownInstance } from 'vue3-ep-biz-lib'

const ref1 = ref<BizCountdownInstance | null>(null)
const remain = ref(0)
</script>

<template>
  <div class="box">
    <BizCountdown ref="ref1" :duration="300" unit="s" format="mm:ss" @tick="(ms) => (remain = Math.floor(ms / 1000))" />
    <div class="ops">
      <ElButton size="small" @click="ref1?.pause()">暂停</ElButton>
      <ElButton size="small" @click="ref1?.resume()">恢复</ElButton>
      <ElButton size="small" @click="ref1?.reset()">重置</ElButton>
      <span class="tip">剩余 {{ remain }}s（tick 事件可做轮询保活 / 二次提醒）</span>
    </div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ops {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

订单支付窗口

订单 #2026092900123待支付

¥ 1,299.00

请在 00:00 内完成支付

120 秒支付窗口 + finish 自动关单 + 重新下单重置（电商下单最常见形态）。

<script setup lang="ts">
/** 订单支付卡：120 秒支付窗口 + 超时自动关闭 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizCountdown } from 'vue3-ep-biz-lib'

const remaining = ref(120)
const closed = ref(false)

const onFinish = (): void => {
  closed.value = true
  ElMessage.warning('超时未支付，订单已自动关闭')
}

const repay = (): void => {
  closed.value = false
  remaining.value = 120
}
</script>

<template>
  <div class="card">
    <div class="head">
      <span>订单 #2026092900123</span>
      <ElTag v-if="!closed" type="warning" size="small">待支付</ElTag>
      <ElTag v-else type="info" size="small">已关闭</ElTag>
    </div>
    <div class="amount">¥ 1,299.00</div>
    <div v-if="!closed" class="pay">
      请在 <BizCountdown :duration="remaining" unit="s" format="mm:ss" @finish="onFinish" /> 内完成支付
    </div>
    <ElButton v-else size="small" style="margin-top: 10px" @click="repay">重新下单（重置倒计时）</ElButton>
  </div>
</template>

<style scoped>
.card {
  padding: 16px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  max-width: 300px;
}
.head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
.amount {
  margin: 10px 0;
  font-size: 22px;
  font-weight: 600;
}
.pay {
  font-size: 13px;
}
</style>

显示代码

多活动并列

秒杀场次00 秒

整点开抢00:00:00

预售开启03 天 07:00:00

第一项 urgent-ms=30000：30 秒内变红；format 支持任意文案混排（“ss 秒” / “DD 天 …”）

三种 format 形态混排；urgent-ms 自定义红色警示阈值（30 秒）。

<script setup lang="ts">
/** 多活动并列：三种 format 形态 + urgent-ms 阈值演示 */
import { BizCountdown } from 'vue3-ep-biz-lib'
</script>

<template>
  <div class="box">
    <div class="row">
      <span class="label">秒杀场次</span>
      <BizCountdown :duration="45" unit="s" format="ss 秒" :urgent-ms="30000" />
    </div>
    <div class="row">
      <span class="label">整点开抢</span>
      <BizCountdown :duration="3725" unit="s" format="HH:mm:ss" />
    </div>
    <div class="row">
      <span class="label">预售开启</span>
      <BizCountdown :target="Date.now() + 3 * 86400 * 1000 + 7 * 3600 * 1000" format="DD 天 HH:mm:ss" />
    </div>
    <div class="tip">第一项 urgent-ms=30000：30 秒内变红；format 支持任意文案混排（“ss 秒” / “DD 天 …”）</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.label {
  width: 80px;
  color: var(--el-text-color-secondary);
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

考试暂停恢复

剩余作答时间：00:00

pause/resume + tick 联动整体进度条（监考中断场景）。

<script setup lang="ts">
/** 考试倒计时：暂停/恢复（监考中断场景）+ tick 联动进度条 */
import { computed, ref } from 'vue'
import { BizCountdown } from 'vue3-ep-biz-lib'
import type { BizCountdownInstance } from 'vue3-ep-biz-lib'

const DURATION = 180
const remainSec = ref(DURATION)
const ref1 = ref<BizCountdownInstance | null>(null)
const percent = computed(() => Math.round((remainSec.value / DURATION) * 100))
</script>

<template>
  <div class="box">
    <div class="bar">
      <ElProgress :percentage="percent" :stroke-width="10" :show-text="false" />
    </div>
    <div class="row">
      剩余作答时间：<BizCountdown
        ref="ref1"
        :duration="DURATION"
        unit="s"
        format="mm:ss"
        :urgent-ms="30000"
        @tick="(ms) => (remainSec = Math.floor(ms / 1000))"
      />
    </div>
    <div class="ops">
      <ElButton size="small" @click="ref1?.pause()">暂停（监考中断）</ElButton>
      <ElButton size="small" @click="ref1?.resume()">恢复</ElButton>
      <ElButton size="small" @click="() => { ref1?.reset(); remainSec = DURATION }">重置</ElButton>
    </div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}
.row {
  font-size: 14px;
}
.ops {
  display: flex;
  gap: 8px;
}
</style>

显示代码

与倒计时按钮组合

BizCountdownButton 发送验证码 + 文本倒计时同步展示有效期。

<script setup lang="ts">
/** 与 BizCountdownButton 组合：发送验证码 + 冷却文案同步展示 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizCountdown, BizCountdownButton } from 'vue3-ep-biz-lib'

const sent = ref(false)
const remain = ref(60)

const onSend = (): void => {
  sent.value = true
  remain.value = 60
  ElMessage.success('验证码已发送')
}
</script>

<template>
  <div class="box">
    <div class="row">
      <ElInput placeholder="请输入手机号" style="width: 200px" disabled model-value="138****5678" />
      <BizCountdownButton :duration="60" start-text="获取验证码" @click="onSend" />
    </div>
    <div v-if="sent" class="tip">
      验证码有效期剩 <BizCountdown :duration="remain" unit="s" format="ss 秒" @tick="(ms) => (remain = Math.floor(ms / 1000))" />，过期请重新获取
    </div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.row {
  display: flex;
  gap: 8px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

Props

属性名	类型	默认值	说明
target	number	—	目标时间戳（与 duration 二选一）
duration	number	—	剩余时长（按 unit 语义）
unit	'ms' | 's'	'ms'	target / duration 单位
format	string	'HH:mm:ss'	DD / HH / mm / ss 占位（出现 DD 时 HH 取天内小时）
finished-text	string	'已结束'	归零后文案（空串显示 00:00:00）
interval	number	1000	刷新间隔（ms）
urgent-ms	number	60000	剩余多少毫秒内红色警示（传 0 关闭）

Events

事件名	参数	说明
finish	—	倒计时归零（仅触发一次）
tick	(remainMs: number)	每次刷新回调

Slots

插槽名	说明
—	无插槽（前后缀用 prefix / suffix 属性传入或外层拼接）

Expose

属性/方法	说明
pause / resume	暂停 / 恢复
reset	() => void 重置（duration 按 props 重算）
getRemainMs	() => number 当前剩余毫秒