空状态时的展示占位图。
- 当目前没有数据时，用于显式的用户提示。
- 初始化场景时的引导创建。
- 搜索/筛选无结果时的提示。
import { Empty } from "@reglow/reui";
使用 title 和 description 展示空状态。
<template>
<Empty
title="功能建设中"
description="当前功能暂未开放，敬请期待。"
/>
</template>
通过 image 属性传入自定义占位图，支持 URL 或 VNode。
<script setup>
import { h } from "vue";
const imageUrl = { url: "/empty.svg" };
</script>
<template>
<!-- URL 模式 -->
<Empty :image="imageUrl" title="暂无数据" />
<!-- 不使用图片 -->
<Empty title="暂未找到匹配的筛选结果" description="试试重置筛选条件" />
</template>
通过默认 slot 添加操作按钮。
<template>
<Empty
title="空状态标题"
description="开始创建你的第一个仪表盘吧！"
>
<div class="flex gap-3">
<Button variant="outline">次要按钮</Button>
<Button>主要按钮</Button>
</div>
</Empty>
</template>
通过 #description slot 自定义描述内容。
<template>
<Empty title="暂未找到匹配的筛选结果">
<template #description>
<span>
试试
<a href="#" class="text-primary underline">重置筛选条件</a>
</span>
</template>
</Empty>
</template>
支持 vertical 和 horizontal 两种布局。
<template>
<!-- 水平布局，适合长文本 -->
<Empty
title="创建成功"
layout="horizontal"
description="这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。"
>
<Button>开始操作</Button>
</Empty>
</template>
通过 #image slot 完全自定义占位图。
<template>
<Empty title="无搜索结果">
<template #image>
<img src="/illustration.svg" alt="" class="w-[150px] h-[150px]" />
</template>
<Button>重置搜索</Button>
</Empty>
</template>
通过 imageStyle 自定义占位图样式。
<template>
<Empty
title="暂无内容"
:image-style="{ width: '100px', height: '100px' }"
/>
</template>
<template>
<Table :data="[]">
<template #empty>
<Empty title="暂无数据" description="点击新增按钮添加数据">
<Button>新增</Button>
</Empty>
</template>
</Table>
</template>
| 参数 | 说明 | 类型 | 默认值 |
|---|
| image | 占位图，支持 VNode 或 { url: string } 对象 | VNode | { url?: string } | 内置默认插画 |
| darkModeImage | 暗色模式占位图 | VNode | { url?: string } | - |
| title | 标题 | string | VNode | - |
| description | 内容描述 | string | VNode | - |
| layout | 布局方式 | vertical | horizontal | vertical |
| imageStyle | 占位图样式 | CSSProperties | - |
| class | 附加类名 | string | - |
| 名称 | 说明 |
|---|
| default | 默认插槽，操作按钮等 |
| image | 自定义占位图 |
| title | 自定义标题 |
| description | 自定义描述 |
- 标题：简洁易懂
- 描述：展示空状态的原因或后续操作引导，1-2 句话内
- 按钮：使用「动词 + 名词」格式，如「新建项目」
- 占位图
aria-hidden="true" - 描述文字使用
text-muted-foreground 确保可读性
