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

Empty 空状态

列表 / 表格 / 搜索结果为空时的占位组件，可带操作按钮，3 档尺寸。

基础用法

不传 props 显示默认图标和「暂无数据」。

暂无数据

<CfEmpty />

<CfEmpty />

自定义文案

title 是主文案，description 是副文案。两者都可作为 prop 或同名 slot 提供。

还没有项目

创建你的第一个项目来开始使用础件。

<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
/>

<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
/>

操作按钮

action 插槽（Vue）/ action prop（React）放跳转或新建按钮 — 让用户从空状态有路径回到正常状态。

还没有项目

创建你的第一个项目来开始使用础件。

<CfEmpty title="还没有项目" description="创建你的第一个项目来开始使用础件。">
<template #action>
  <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
</template>
</CfEmpty>

<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
action={<CfButton variant="primary" size="sm">+ 新建项目</CfButton>}
/>

状态插图

默认图标来自 CfStatusIllustration。可以在 icon 插槽（Vue）/ icon prop（React）里换成搜索、上传、错误等不同状态。

没有搜索结果

换个关键词或清空筛选条件试试。

还没有文件

拖拽文件到这里，或点击上传。

<CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
<template #icon>
  <CfStatusIllustration variant="search" />
</template>
</CfEmpty>

<CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
<template #icon>
  <CfStatusIllustration variant="upload" />
</template>
</CfEmpty>

<CfEmpty
title="没有搜索结果"
description="换个关键词或清空筛选条件试试。"
icon={<CfStatusIllustration variant="search" />}
/>

<CfEmpty
title="还没有文件"
description="拖拽文件到这里，或点击上传。"
icon={<CfStatusIllustration variant="upload" />}
/>

三档尺寸

size —— sm（行内 inline 占位）/ md 默认 / lg 整页空状态。

size = sm

size = md

size = lg

<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />

<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />

API

Prop	类型	默认值	说明
`title`	`string`	`'暂无数据'`	主文案
`description`	`string`	—	副文案
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	整体尺寸

插槽 / Children

icon —— 替换默认 SVG 图标
title / description —— 替换文本节点（同名 prop 也可）
action —— 操作按钮区

CfStatusIllustration

Prop	类型	默认值	说明
`variant`	`'empty' \| 'search' \| 'upload' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'not-found' \| 'forbidden' \| 'server-error'`	`'empty'`	状态插图类型
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	插图尺寸
`title`	`string`	—	传入后作为可访问名称；不传则作为装饰图