Preview Updated 2026-05-10

Countdown

Counts down to a target timestamp. Supports format strings with DD/HH/mm/ss/SSS placeholders.

Basic usage

target accepts a timestamp (ms), a Date, or any string parseable by Date.parse. format controls the display style; onFinish fires when it hits zero.

背景

00:00:00

src/App.vue

<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>

import { CfCountDown } from '@chufix-design/react';

export default function Demo() {
  const target = ref<number>(now + 60_000);
  return (
    <>
      <CfCountDown target={target} format="HH:mm:ss" size="lg" onFinish={onDone} />
    </>
  );
}

API

Prop	Type	Default	Description
`target`	`number \| Date \| string`	`—`	Target time; counter resets to zero when reached
`format`	`string`	`'HH:mm:ss'`	Tokens: DD HH mm ss SSS
`interval`	`number`	`1000`	Tick interval (ms); set to 100 for 100ms precision
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size tier

Events: onFinish() when reaching zero, onChange(remaining) on each tick.