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

CountDown 倒计时

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

基础用法

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

背景视口

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

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

Events

Vue 事件	React 回调	载荷类型	说明
`finish`	`onFinish`	—	倒计时归零时触发，且后续不再触发 `change`
`change`	`onChange`	`number`	每个 tick 触发；载荷是剩余毫秒数