外观
Empty 内容为空
约 515 字大约 2 分钟
2025-10-31
该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景, 我们精心挑选了十几个场景的图标,方便您使用。
基本使用
- 通过
text参数配置提示的文字内容 - 通过
mode(默认为data)参数配置要显示的图标
<template>
<un-empty
mode="car"
text="暂无商品"
icon="http://cdn.uviewui.com/uview/empty/car.png"
>
</un-empty>
</template>内置图标
这些图标已内置,直接通过mode参数引用即可
| 名称 | 说明 |
|---|---|
| car | 购物车为空 |
| page | 页面不存在 |
| search | 没有搜索结果 |
| address | 没有收货地址 |
| wifi | 没有WiFi |
| order | 订单为空 |
| coupon | 没有优惠券 |
| favor | 无收藏 |
| permission | 无权限 |
| history | 无历史记录 |
| news | 无新闻列表 |
| message | 消息列表为空 |
| list | 列表为空(通用) |
| data | 数据为空(默认,通用) |
| comment | 暂无评论 |
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 内置图标名称,或图片路径,建议绝对路径 | string | - |
| text | 提示文字 | string | - |
| textColor | 文字颜色 | string | - |
| textSize | 文字大小 | string | number | - |
| iconColor | 图标的颜色 | string | - |
| iconSize | 图标的大小 | string | number | - |
| mode | 选择预置的图标类型 | Enum | data |
| width | 图标宽度,单位px | string | number | 160 |
| height | 图标高度,单位px | string | number | 160 |
| show | 是否显示组件 | boolean | true |
| marginTop | 组件距离上一个元素之间的距离,默认px单位 | string | number | 0 |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 点击组件时触发 | Function |
| close | 点击关闭按钮时触发 | Function |
Slot
| 名称 | 说明 |
|---|---|
| default | 给组件底部传入slot内容 |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-empty-text-margin-top | 10px | 文本上边距 |
| $un-empty-text-font-size | $text-base | 文本字体大小 |
| $un-empty-text-color | $text-color-muted | 文本颜色 |
| $un-empty-wraper-margin-top | 10px | 包装器上边距 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
