# Empty 内容为空

该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个“没有内容”的场景, 我们精心挑选了十几个场景的图标,方便您直接使用。

# 平台兼容性

App(vue) App(nvue) H5 小程序 VUE2 VUE3

提示

我们的专业设计师精心为您准备了一套精美默认图,带有图片和Sketch文件,您可以下载或修改后再使用:资源下载

# 基本使用

  • 通过text参数配置提示的文字内容
  • 通过mode(默认为data)参数配置要显示的图标
<uv-empty mode="car" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>

# 内置图标

这些图标已内置,直接通过mode参数引用即可

名称 说明
car 购物车为空
page 页面不存在
search 没有搜索结果
address 没有收货地址
wifi-off 没有WiFi
order 订单为空
coupon 没有优惠券
favor 无收藏
permission 无权限
history 无历史记录
news 无新闻列表
message 消息列表为空
list 列表为空(通用)
data 数据为空(默认,通用)

# 完整示例

# API


# Empty Props

参数 说明 类型 默认值 可选值
icon 内置图标名称,或图片路径,建议绝对路径,支持base64图片 String - -
text 文字提示 String - -
textColor 文字颜色 String #c0c4cc -
textSize 文字大小 String | Number 14 -
iconColor 图标的颜色 String #c0c4cc -
iconSize 图标的大小 String | Number 90 -
mode 内置的图标,见上方说明 String data -
width 图标的宽度,单位px String | Number 160 -
height 图标的高度,单位px String | Number 160 -
show 是否显示组件 Boolean true true | false
marginTop 组件到上一个元素的间距,单位px String | Number 0 -

# Empty Slots

名称 说明
- 给组件底部传入slot内容