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

Alert 警示

inline 静态消息条 —— 4 种 tone × 3 种 variant，可带标题、图标、关闭按钮。

基础用法

最简形态 —— 一段说明文字加上 status 图标和可选的标题。

背景视口

一条信息

这是一段补充说明，用于解释当前状态。

src/App.vue

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <CfAlert tone="info" title="一条信息">这是一段补充说明，用于解释当前状态。</CfAlert>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <CfAlert tone="info" title="一条信息">这是一段补充说明，用于解释当前状态。</CfAlert>
</template>

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="info" title="一条信息">这是一段补充说明。</CfAlert>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="info" title="一条信息">这是一段补充说明。</CfAlert>
    </>
  );
}

4 种 tone

tone 决定语义颜色 —— info / success / warning / error，对应 token 里 --status-*。每种 tone 自带匹配的 status 图标。

背景视口

一条信息

蓝色，中性提示。

保存成功

绿色，正向反馈。

磁盘空间不足

黄色，需要注意但非阻塞。

无法连接到服务

红色，严重错误。

src/App.vue

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="info" title="一条信息">蓝色，中性提示。</CfAlert>
    <CfAlert tone="success" title="保存成功">绿色，正向反馈。</CfAlert>
    <CfAlert tone="warning" title="磁盘空间不足">黄色，需要注意但非阻塞。</CfAlert>
    <CfAlert tone="error" title="无法连接到服务">红色，严重错误。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="info" title="一条信息">蓝色，中性提示。</CfAlert>
    <CfAlert tone="success" title="保存成功">绿色，正向反馈。</CfAlert>
    <CfAlert tone="warning" title="磁盘空间不足">黄色，需要注意但非阻塞。</CfAlert>
    <CfAlert tone="error" title="无法连接到服务">红色，严重错误。</CfAlert>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="info" title="一条信息">蓝色</CfAlert>
      <CfAlert tone="success" title="保存成功">绿色</CfAlert>
      <CfAlert tone="warning" title="磁盘空间不足">黄色</CfAlert>
      <CfAlert tone="error" title="无法连接到服务">红色</CfAlert>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="info" title="一条信息">蓝色</CfAlert>
      <CfAlert tone="success" title="保存成功">绿色</CfAlert>
      <CfAlert tone="warning" title="磁盘空间不足">黄色</CfAlert>
      <CfAlert tone="error" title="无法连接到服务">红色</CfAlert>
    </>
  );
}

3 种 variant

variant 改变背景与边框：soft（浅色背景，默认，最常用）/ outline（透明背景 + 边框，最克制）/ solid（满色背景，最强势）。

背景视口

soft —— 浅色背景，默认样式。

outline —— 透明背景 + 同色边框。

solid —— 满色背景，文字反白。

src/App.vue

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="success" variant="soft">soft —— 浅色背景，默认样式。</CfAlert>
    <CfAlert tone="success" variant="outline">outline —— 透明背景 + 同色边框。</CfAlert>
    <CfAlert tone="success" variant="solid">solid —— 满色背景，文字反白。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="success" variant="soft">soft —— 浅色背景，默认样式。</CfAlert>
    <CfAlert tone="success" variant="outline">outline —— 透明背景 + 同色边框。</CfAlert>
    <CfAlert tone="success" variant="solid">solid —— 满色背景，文字反白。</CfAlert>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="success" variant="soft">soft</CfAlert>
      <CfAlert tone="success" variant="outline">outline</CfAlert>
      <CfAlert tone="success" variant="solid">solid</CfAlert>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="success" variant="soft">soft</CfAlert>
      <CfAlert tone="success" variant="outline">outline</CfAlert>
      <CfAlert tone="success" variant="solid">solid</CfAlert>
    </>
  );
}

关闭按钮

closable 在右侧加一个 × 按钮 — 点击后整个 alert 从 DOM 中移除，并触发 close / onClose 事件。

背景视口

可关闭

右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。

仅正文 + 关闭按钮，没有 title。

src/App.vue

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="warning" title="可关闭" closable>右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。</CfAlert>
    <CfAlert tone="info" closable>仅正文 + 关闭按钮，没有 title。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="warning" title="可关闭" closable>右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。</CfAlert>
    <CfAlert tone="info" closable>仅正文 + 关闭按钮，没有 title。</CfAlert>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="warning" title="可关闭" closable>
      右侧出现 × 按钮。
      </CfAlert>
      <CfAlert tone="info" closable>无 title 的关闭式 alert。</CfAlert>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="warning" title="可关闭" closable>
      右侧出现 × 按钮。
      </CfAlert>
      <CfAlert tone="info" closable>无 title 的关闭式 alert。</CfAlert>
    </>
  );
}

隐藏图标

icon={false} 省去左侧 status 图标 —— 用在密集文本流或表单内联提示中更紧凑。

背景视口

无图标版本

省去左侧 status 图标，更紧凑。

仅一行文字，最克制的提示形式。

src/App.vue

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="info" :icon="false" title="无图标版本">省去左侧 status 图标，更紧凑。</CfAlert>
    <CfAlert tone="success" :icon="false">仅一行文字，最克制的提示形式。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfAlert tone="info" :icon="false" title="无图标版本">省去左侧 status 图标，更紧凑。</CfAlert>
    <CfAlert tone="success" :icon="false">仅一行文字，最克制的提示形式。</CfAlert>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="info" icon={false} title="无图标版本">更紧凑</CfAlert>
      <CfAlert tone="success" icon={false}>仅一行文字</CfAlert>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfAlert tone="info" icon={false} title="无图标版本">更紧凑</CfAlert>
      <CfAlert tone="success" icon={false}>仅一行文字</CfAlert>
    </>
  );
}

自定义标题 (slot)

title prop 只能传纯文本。需要在标题里放链接、图标、<code> 等富内容时，用 #title 具名插槽（React 端 title prop 直接传 ReactNode）。一旦传了 #title 插槽，title prop 会被忽略。

背景视口

新版本 v0.3 已发布 · 查看更新日志

包含若干 docs 增强与 token 修正。

磁盘空间剩余 2.1 GB

建议立即清理或扩容，避免写入失败。

src/App.vue

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <CfAlert tone="info">
    <template #title>
      新版本 <strong>v0.3</strong> 已发布 ·
      <a href="#" class="adm-link">查看更新日志</a>
    </template>
    包含若干 docs 增强与 token 修正。
  </CfAlert>
  <CfAlert tone="warning">
    <template #title>
      <span class="adm-title-row">
        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M8 2l6 11H2z" />
          <path d="M8 7v3" />
        </svg>
        磁盘空间剩余 <code>2.1 GB</code>
      </span>
    </template>
    建议立即清理或扩容，避免写入失败。
  </CfAlert>
</template>
<style scoped>
.adm-link { color: inherit; text-decoration: underline; }
.adm-title-row { display: inline-flex; align-items: center; gap: 6px; }
code { font-family: var(--font-mono); font-size: 0.9em; }
</style>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>
<template>
  <CfAlert tone="info">
    <template #title>
      新版本 <strong>v0.3</strong> 已发布 ·
      <a href="#" class="adm-link">查看更新日志</a>
    </template>
    包含若干 docs 增强与 token 修正。
  </CfAlert>
  <CfAlert tone="warning">
    <template #title>
      <span class="adm-title-row">
        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M8 2l6 11H2z" />
          <path d="M8 7v3" />
        </svg>
        磁盘空间剩余 <code>2.1 GB</code>
      </span>
    </template>
    建议立即清理或扩容，避免写入失败。
  </CfAlert>
</template>
<style scoped>
.adm-link { color: inherit; text-decoration: underline; }
.adm-title-row { display: inline-flex; align-items: center; gap: 6px; }
code { font-family: var(--font-mono); font-size: 0.9em; }
</style>

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

export default function Demo() {
  return (
    <>
      <CfAlert
      tone="info"
      title={<>
        新版本 <strong>v0.3</strong> 已发布 ·
        <a href="#">查看更新日志</a>
      </>}
      >
      包含若干 docs 增强与 token 修正。
      </CfAlert>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfAlert
      tone="info"
      title={<>
        新版本 <strong>v0.3</strong> 已发布 ·
        <a href="#">查看更新日志</a>
      </>}
      >
      包含若干 docs 增强与 token 修正。
      </CfAlert>
    </>
  );
}

API

Props

Prop	类型	默认值	说明
`tone`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	语义颜色
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	视觉变体
`title`	`string`	—	加粗的强调标题；插槽优先
`icon`	`boolean`	`true`	是否显示左侧 status 图标
`closable`	`boolean`	`false`	是否显示右侧 × 按钮

Events

Vue 事件	React 回调	载荷类型	说明
`close`	`onClose`	—	用户点击关闭按钮时触发

Slots

Slot	作用域参数	说明
`default`	—	正文内容
`title`	—	富文本标题（覆盖 `title` prop）