empty 空内容

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-empty": "@retailwe/ui-empty/index"
}

代码演示

基础用法

<view style="width: 100%; height: 300rpx;">
  <wr-empty>空空如也</wr-empty>
</view>

指定图片大小

<view style="width: 100%; height: 300rpx;">
  <wr-empty size="150rpx">空空如也</wr-empty>
</view>

指定文字大小

<view style="width: 100%; height: 300rpx;">
  <wr-empty textSize="30rpx">空空如也</wr-empty>
</view>

指定文字颜色

<view style="width: 100%; height: 300rpx;">
  <wr-empty textColor="blue">空空如也</wr-empty>
</view>

API

empty Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | -------- | -------- | ------------------------------------------------------------------- | ---- | | src | 图片地址 | string | https://cdn.ghsmpwalmart.com/saas/market/image/empty/no_goods.png | - | | size | 图片大小 | string | 100rpx | - | | textSize | 文字大小 | string | 24rpx | - | | textColor | 文字颜色 | string | #969799 | - | | backColor | 背景颜色 | string | - | - |

Slots

| 名称 | 说明 | | ---- | -------- | | - | 加载文案 |

empty 外部样式类

| 类名 | 说明 | | -------- | ------------ | | wr-class | 根节点样式类 |