Empty 空状态
空状态时的展示占位图。
基础用法
展示最简单的空状态。
暂无数据
基础用法
自定义图片
通过 image 属性传入图片的地址。
自定义图片
自定义图片
图片尺寸
通过 image-size 属性设置图片的大小（宽高）。
自定义图片大小
图片尺寸
自定义底部内容
使用默认插槽可在底部添加自定义内容，如操作按钮。
您还没有任何订单
自定义底部内容
自定义图像
使用 #image 插槽完全自定义图像区域。
📦
自定义图像插槽
自定义图像
自定义描述
使用 #description 插槽自定义描述文字区域。
暂无相关搜索结果，请尝试 修改关键词
自定义描述
在 Nuxt 中使用
Empty 组件完全支持 Nuxt 3/4 的 SSR 渲染。空状态的图像和描述在服务端渲染时即可正确展示，确保首屏即呈现完整的空状态提示，增强用户体验。
暂无数据
Nuxt 中使用
SSR 注意事项：
- ✅ 描述文字 (description) 和图片 (image) 首屏正确渲染
- ✅ 内置 SVG 插图在服务端完整输出
- ✅ 自定义图片尺寸 (image-size) 首屏即生效
- 💡 动态数据加载后切换空状态/内容的逻辑在客户端激活后自动完成
Nuxt 自动导入
在安装 @yh-ui/nuxt 模块后，YhEmpty 组件会被自动注册，无需手动导入。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image | 自定义图片地址 | string | — |
| image-size | 图片尺寸（px） | number | 100 |
| description | 描述文字 | string | '暂无数据' |
| icon | 自定义图像组件 | string | Component | — |
| theme-overrides | 主题覆盖变量 | ComponentThemeVars | — |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义底部内容（如操作按钮） |
| image | 自定义图像区域 |
| description | 自定义描述文字 |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-empty-padding | 容器内边距 | 40px 0 |
--yh-empty-description-color | 描述文字颜色 | var(--yh-text-color-secondary, #909399) |
--yh-empty-description-font-size | 描述文字大小 | 14px |
--yh-empty-ellipse-color | 默认插图椭圆颜色 | #f5f5f7 |
--yh-empty-image-fill | 默认插图主填充色 | #aeb8c2 |
--yh-empty-image-fill2 | 默认插图次填充色 | #f5f5f7 |
--yh-empty-plane-bg | 默认插图纸面背景色 | #f5f5f7 |
--yh-empty-comment-fill | 默认插图评论填充色 | #dce0e6 |