开发预览更新于 2026-05-10

CountDown 倒计时

倒数到一个目标时间戳，支持 DD/HH/mm/ss/SSS 占位的格式串。

基础用法

target 接受时间戳 (ms) / Date / 可被 Date.parse 识别的字符串。format 控制展示样式，归零时触发 onFinish。

背景

00:00:00

<script setup lang="ts">
import { ref, computed } from 'vue';
import { CfCountDown, CfButton } from '@chufix-design/vue';

const now = Date.now();
const target = ref<number>(now + 60_000);

function reset() {
  target.value = Date.now() + 60_000;
}

const finished = ref(false);
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfCountDown :target="target" format="HH:mm:ss" size="lg" @finish="finished = true" />
    <CfButton size="sm" @click="() => { finished = false; reset(); }">重置 60 秒</CfButton>
    <span v-if="finished" style="color: var(--status-success);">已结束</span>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { CfCountDown, CfButton } from '@chufix-design/vue';

const now = Date.now();
const target = ref<number>(now + 60_000);

function reset() {
  target.value = Date.now() + 60_000;
}

const finished = ref(false);
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfCountDown :target="target" format="HH:mm:ss" size="lg" @finish="finished = true" />
    <CfButton size="sm" @click="() => { finished = false; reset(); }">重置 60 秒</CfButton>
    <span v-if="finished" style="color: var(--status-success);">已结束</span>
  </div>
</template>

<CfCountDown target={target} format="HH:mm:ss" size="lg" onFinish={onDone} />

<CfCountDown target={target} format="HH:mm:ss" size="lg" onFinish={onDone} />

API

属性	类型	默认值	说明
`target`	`number \| Date \| string`	`—`	目标时间，到达后归零
`format`	`string`	`'HH:mm:ss'`	占位符：DD HH mm ss SSS
`interval`	`number`	`1000`	刷新间隔（毫秒）；写 100 可取得百毫秒精度
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号档位

事件：onFinish() 归零；onChange(remaining) 每次 tick。