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 { useState } from 'react';
import { CfButton, CfCountDown } from '@chufix-design/react';

export default function Demo() {
  const now = Date.now();
  const [target, setTarget] = useState<number>(now + 60_000);

  function reset() {
    setTarget(Date.now() + 60_000);
  }

  const [finished, setFinished] = useState(false);
  return (
    <>
      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
          <CfCountDown target={target} format="HH:mm:ss" size="lg" onFinish={() => setFinished(true)} />
          <CfButton size="sm" onClick={() => { setFinished(false); reset(); }}>重置 60 秒</CfButton>
          <span v-if="finished" style={{ color: "var(--status-success)" }}>已结束</span>
        </div>
    </>
  );
}

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

export default function Demo() {
  const now = Date.now();
  const [target, setTarget] = useState<number>(now + 60_000);

  function reset() {
    setTarget(Date.now() + 60_000);
  }

  const [finished, setFinished] = useState(false);
  return (
    <>
      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
          <CfCountDown target={target} format="HH:mm:ss" size="lg" onFinish={() => setFinished(true)} />
          <CfButton size="sm" onClick={() => { setFinished(false); reset(); }}>重置 60 秒</CfButton>
          <span v-if="finished" style={{ color: "var(--status-success)" }}>已结束</span>
        </div>
    </>
  );
}

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.