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

PulseDot 脉冲指示点

圆点 + 外圈扩散动画，用于在线 / live / 健康状态指示；tone 选语义色，size 选大小，pulse=false 时静态。

基础用法

背景视口

健康同步中降级不可达LIVE离线

src/App.vue

<script setup lang="ts">
import { CfPulseDot } from '@chufix-design/vue';
</script>
<template>
  <div class="pd-demo">
    <CfPulseDot tone="success" label="健康" />
    <CfPulseDot tone="info" label="同步中" />
    <CfPulseDot tone="warning" label="降级" />
    <CfPulseDot tone="error" label="不可达" />
    <CfPulseDot tone="accent" label="LIVE" size="lg" />
    <CfPulseDot tone="default" :pulse="false" label="离线" />
  </div>
</template>
<style scoped>
.pd-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
</style>

<script setup>
import { CfPulseDot } from '@chufix-design/vue';
</script>
<template>
  <div class="pd-demo">
    <CfPulseDot tone="success" label="健康" />
    <CfPulseDot tone="info" label="同步中" />
    <CfPulseDot tone="warning" label="降级" />
    <CfPulseDot tone="error" label="不可达" />
    <CfPulseDot tone="accent" label="LIVE" size="lg" />
    <CfPulseDot tone="default" :pulse="false" label="离线" />
  </div>
</template>
<style scoped>
.pd-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
</style>

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

export default function Demo() {
  return (
    <>
      <CfPulseDot tone="success" label="健康" />
      <CfPulseDot tone="error" label="不可达" />
      <CfPulseDot tone="accent" label="LIVE" size="lg" />
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfPulseDot tone="success" label="健康" />
      <CfPulseDot tone="error" label="不可达" />
      <CfPulseDot tone="accent" label="LIVE" size="lg" />
    </>
  );
}

API

属性	类型	默认	说明
`tone`	`'success' \| 'warning' \| 'error' \| 'info' \| 'accent' \| 'default'`	`'success'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`pulse`	`boolean`	`true`	关闭后只显示静态点
`label`	`string`	—	文字标签