Empty 空状态

内容为空时的占位。四种类型区分「没数据」与「加载失败」。

四种类型

default

search

data

error

<SrEmpty type="default" />
<SrEmpty type="search" />
<SrEmpty type="data" />
<SrEmpty type="error" />

为什么要分类型

这是 Empty 唯一值得强调的设计点。用户看到"空"的时候， 最需要知道的是"为什么空"——而这两件事需要的行动完全不同：

类型	场景	用户该做什么
search	搜不到结果	换个关键词
data	还没有数据	去创建
error	加载失败	重试
default	其他	——

用同一个"暂无数据"图标应付全部情况是常见的问题—— 用户搜了个词、看到"暂无数据"，会以为系统里真的没有这类信息， 而实际上只是关键词不对。

没有找到匹配「Vue」的内容

还没有创建任何项目

加载失败，请检查网络后重试

<SrEmpty type="search" description="没有找到匹配「Vue」的内容" />
<SrEmpty type="data" description="还没有创建任何项目" />
<SrEmpty type="error" description="加载失败，请检查网络后重试" />

带上行动按钮

空状态的文案里最好有下一步该做什么。

<SrEmpty type="data" description="还没有创建任何项目">
  <template #default>
    <SrButton variant="primary">新建项目</SrButton>
  </template>
</SrEmpty>

默认插槽放行动按钮——空状态是引导用户的最佳时机， 此时他正盯着一个什么都没有的区域，注意力最集中。

尺寸

小

中

大

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

用在表格、下拉面板这类紧凑容器里时用 sm—— 默认尺寸在小容器里会显得突兀。

自定义图标

<SrEmpty description="暂无通知">
  <template #image>
    <SrIcon size="lg"><svg … /></SrIcon>
  </template>
</SrEmpty>

Props

名称	类型	默认值	说明
description	string	按 type 派生	说明文字
type	'default' | 'search' | 'data' | 'error'	'default'	类型
size	'sm' | 'md' | 'lg'	'md'	尺寸

插槽

名称	说明
default	行动区域（通常放一个按钮）
image	自定义图标

无障碍

• 容器带 role="status"，内容变化时读屏软件会播报， 而不是让用户对着空白区域反复 Tab
• 说明文字是文本而非图片——若用图片表达"搜索无结果"， 读屏用户只会听到"图片"
• 行动按钮是真实的 <button>，键盘可聚焦