@retailwe/ui-error NPM

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}次打开彩蛋~"`	-