ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

Empty 空状态

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

基础用法

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

背景
暂无数据
 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>
<CfEmpty />
<CfEmpty />

自定义文案

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

背景
还没有项目
创建你的第一个项目来开始使用础件。
 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>
<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
/>
<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
/>

操作按钮

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

背景
还没有项目
创建你的第一个项目来开始使用础件。
 
<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<script setup>
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
action={<CfButton variant="primary" size="sm">+ 新建项目</CfButton>}
/>
<CfEmpty
title="还没有项目"
description="创建你的第一个项目来开始使用础件。"
action={<CfButton variant="primary" size="sm">+ 新建项目</CfButton>}
/>

状态插图

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

背景
没有搜索结果
换个关键词或清空筛选条件试试。
还没有文件
拖拽文件到这里，或点击上传。
 
<script setup lang="ts">
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>

<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>

<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>
<script setup>
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>

<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>

<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>
<CfEmpty
title="没有搜索结果"
description="换个关键词或清空筛选条件试试。"
icon={<CfStatusIllustration variant="search" />}
/>

<CfEmpty
title="还没有文件"
description="拖拽文件到这里，或点击上传。"
icon={<CfStatusIllustration variant="upload" />}
/>
<CfEmpty
title="没有搜索结果"
description="换个关键词或清空筛选条件试试。"
icon={<CfStatusIllustration variant="search" />}
/>

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

自定义图片

整页空状态可以直接传 image，适合接入品牌插画、AI 生成图片、业务 SVG 或 CDN 图片；小图标则继续用 icon slot / prop。

背景
还没有发布记录
可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。
 
<script setup lang="ts">
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <rect x="26" y="34" width="108" height="82" rx="14" fill="#EEF6FF" stroke="#8BBDF8" stroke-width="4"/>
  <path d="M48 58h64M48 78h42M48 98h56" stroke="#2F7DDD" stroke-width="7" stroke-linecap="round"/>
  <circle cx="118" cy="112" r="22" fill="#EAFBF1" stroke="#20A464" stroke-width="4"/>
  <path d="M108 112l7 7 14-16" stroke="#10824D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>

<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<script setup>
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <rect x="26" y="34" width="108" height="82" rx="14" fill="#EEF6FF" stroke="#8BBDF8" stroke-width="4"/>
  <path d="M48 58h64M48 78h42M48 98h56" stroke="#2F7DDD" stroke-width="7" stroke-linecap="round"/>
  <circle cx="118" cy="112" r="22" fill="#EAFBF1" stroke="#20A464" stroke-width="4"/>
  <path d="M108 112l7 7 14-16" stroke="#10824D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>

<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<CfEmpty
title="还没有发布记录"
description="可以用 image 传入产品自己的插画。"
image={image}
imageAlt=""
size="lg"
action={<CfButton variant="primary" size="sm">创建发布记录</CfButton>}
/>
<CfEmpty
title="还没有发布记录"
description="可以用 image 传入产品自己的插画。"
image={image}
imageAlt=""
size="lg"
action={<CfButton variant="primary" size="sm">创建发布记录</CfButton>}
/>

三档尺寸

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

背景
size = sm
size = md
size = lg
 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>
<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />
<CfEmpty size="sm" />
<CfEmpty size="md" />
<CfEmpty size="lg" />

API

Prop类型默认值说明
titlestring'暂无数据'主文案
descriptionstring—副文案
size'sm' | 'md' | 'lg''md'整体尺寸
imagestring—自定义图片 URL / data URL
imageAltstring''图片替代文本；装饰图保持空字符串

插槽 / 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'插图尺寸
titlestring—传入后作为可访问名称；不传则作为装饰图

反馈与讨论

Empty 空状态 的讨论

0
0 / 600
一键发送
正在加载评论...