error 错误内容

引入

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

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

代码演示

基础用法

<view style="width: 100%; height: 300rpx;">
  <wr-error>Not Found</wr-error>
</view>

指定图片地址

<view style="width: 100%; height: 300rpx;">
  <wr-error
    size="150rpx"
    src="https://cdn.ghsmpwalmart.com/saas/market/image/empty/no_cart.png"
    >Not Found</wr-error
  >
</view>

放置彩蛋

<view style="width: 100%; height: 300rpx;">
  <wr-error egg="{{egg}}">Not Found</wr-error>
</view>

Page({
  data: {
    egg: {
      num: 5,
      msg: '错误内容...',
    },
});

设置彩蛋预警

Page({
  data: {
    egg: {
      num: 5,
      msg: '错误内容...',
      tip: {
        num: 3,
      },
    },
});

自定义彩蛋预警提示

Page({
  data: {
    egg: {
      num: 5,
      msg: '错误内容...',
      tip: {
        num: 3,
        msg: '住手! 再来{num}下就露馅了~',
      },
    },
});

自定义彩蛋点击间隔（超过间隔时间没点，已点次数清零）

Page({
  data: {
    egg:  {
      num: 5,
      msg: '错误内容...',
      tip: {
        num: 3,
      },
      timeout: 300,
    },
});

API

error Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | -------------------------- | -------- | ------------------------------------------------------------------- | ---- | | src | 图片地址 | string | https://cdn.ghsmpwalmart.com/saas/market/image/error/no_goods.png | - | | size | 图片大小 | string | 100rpx | - | | textSize | 文字大小 | string | 24rpx | - | | textColor | 文字颜色 | string | #969799 | - | | backColor | 背景颜色 | string | - | - | | egg | 彩蛋，包含属性num和msg | object | null | - |

egg

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------- | ------------------------------ | -------- | ------ | ---- | | num | 开启彩蛋需要点击的次数，必填 | number | - | - | | msg | 彩蛋的文字内容 | string | - | - | | tip | 剩余点击次数提示相关，可选 | object | - | - | | timeout | 最小点击间隔，超时重置已点次数 | number | 2000 | - |

egg.tip

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ---- | --------------------------------------------- | -------- | ------------------------- | ---- | | num | 显示提示需要的点击次数，必填 | number | - | - | | msg | 彩蛋的文字内容模板，可通过{num}插入剩余次数 | string | "再点${num}次打开彩蛋~" | - |

Slots

| 名称 | 说明 | | ---- | -------- | | - | 错误文案 |

error 外部样式类

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