Empty 空状态
空状态占位提示,用于无数据场景,支持多种内置类型、自定义图片、尺寸和底部操作。
基础用法
通过 description 设置描述文字。
暂无数据
内置类型
通过 type 设置不同的空状态场景,提供 default / simple / search / error / network / cart / inbox 七种类型。
暂无数据
default
内容为空
simple
未找到结果
search
加载失败
error
网络异常
network
购物车为空
cart
收件箱为空
inbox
不同尺寸
通过 size 设置尺寸,支持 sm / md / lg。
小尺寸
sm
中等尺寸
md
大尺寸
lg
自定义图片
通过 image 设置自定义图片地址,替换内置图标。
自定义图片空状态
自定义底部操作
使用默认插槽添加操作按钮。
未找到匹配结果
网络异常
使用 network 类型展示网络异常提示,搭配底部操作按钮提供重试能力。
网络连接异常,请检查网络设置
购物车为空
使用 cart 类型展示购物车空状态。
购物车还是空的,快去挑选商品吧
在卡片中使用
将 Empty 组件嵌入卡片等容器中,填充无数据区域。
我的收藏
还没有收藏任何内容
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
description | string | — | 描述文字 |
type | 'default' | 'simple' | 'search' | 'error' | 'network' | 'cart' | 'inbox' | 'default' | 空状态类型 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
image | string | — | 自定义图片地址,设置后替换内置图标 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 自定义底部内容(通常为操作按钮) |