异常信息提示组件

使用

• npm i vi-abnormal-tips
• 使用微信开发者工具构建NPM并使用NPM模块

• 打开小程序页面的json配置.

"usingComponents": {
  "abnormal-tips": "vi-abnormal-tips"
}

• 默认显示效果

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips></abnormal-tips>
  </view>
</template>

• 修改tips提示文本

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips tips="该分类下暂无商品数据"></abnormal-tips>
  </view>
</template>

• tips提示文本换行

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips tips="{{tipsArr}}"></abnormal-tips>
  </view>
</template>
<script>
Page({
  data: {
    tipsArr: [
      '啊哦，暂时还没有内容',
      '联系下客服试试吧'
    ],
  }
})
</script>

• style: 更改icon的样式

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips icon-class="changeIconColor"></abnormal-tips>
  </view>
</template>
<style>
  .changeIconColor {
    color: #eee;
  }
</style>

• style：更改文本提示样式

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips tips-class="changeTextColor"></abnormal-tips>
  </view>
</template>
<style>
  .changeIconColor {
    color: blue;
  }
</style>

• slot：替换组件中icon

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips is-icon-slot>
      <view slot="icon">我是替换的ICON</view>
    </abnormal-tips>
  </view>
</template>

• slot：替换组件的文案提示

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips is-tips-slot>
      <view slot="tips">我是替换的文案提示</view>
    </abnormal-tips>
  </view>
</template>

• extend: 断网刷新按钮

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips
      tips="{{networkTipsArr}}"
      bind:network_change="networkChange"
      bind:refresh="triggerToRefresh">
    </abnormal-tips>
  </view>
</template>
<script>
Page({
  data: {
    networkTipsArr: [
      '请关闭手机网络链接,会出现按钮'
    ],
  },
  triggerToRefresh({ detail }) {
    /* 
      // detail 表示 当前网络环境
      // 值有：wifi、4G、3G、2G、none
    */
    console.log(detail)
  },
  networkChange({ detail }) {
    this.data.networkTipsArr[1] = '当前网络环境：' + detail.networkType
    this.setData({
      networkTipsArr:this.data.networkTipsArr
    })
  }
})
</script>

• extend: 提示按钮

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips
      button="返回首页" 
      tips="啊哦，该分类下暂无商品, 去其他分类下看看吧"
      bind:refresh="triggerToRefresh">
    </abnormal-tips>
  </view>
</template>
<script>
Page({
  triggerToRouter() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
})
</script>

• extend: iconfont flee

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips
      icon-name="flee"
      tips="啊哦，服务器走丢了">
    </abnormal-tips>
  </view>
</template>

• extend: iconfont offline

<template>
  <view style="position:relative;height: 200px; font-size">
    <abnormal-tips
      icon-name="offline"
      tips="啊哦，网络连接失败"
      bind:click="triggerToRouter">
    </abnormal-tips>
  </view>
</template>

属性

| 接口 | 数据类型 | 说明 | 选项 | 默认值 | | :--: | :--: | :--: | :--: | :--: | | tips | String | 组件的提示内容 | 选填 | 暂无内容 | | isIconSlot | Boolean | 是否使用外部ICON或图片 | 选填 | false | | button | String | 提示按钮的内容 | 选填 | '' | | iconName | String | 组件内置的iconfont, 详细内容见下方的iconfont解释 | 选填 | noData | | isTipsSlot | Boolean | 是否使用自定义tips提示内容 | 选填 | false |

事件

| 接口 | 说明 | 返回值 | | :--: | :--: | :--: | | click | tips button按钮点击事件 | 返回当前网络类型：wifi、4G、3G、2G、none | | refresh | 刷新按钮事件 | 返回当前网络类型：wifi、4G、3G、2G、none | | network_change | 获取当前网络的变化 | 返回当前网络类型：wifi、4G、3G、2G、none |

externalClasses

| 接口 | 说明 | | :--: | :--: | | abnormal-class | 组件Root级别的样式 | | icon-class | iconfont样式 | | tips-class | 提示文件样式 |

iconfont

| 名称 | 说明 | | :--: | :--: | | noData | 无数据的iconfont | | flee | 服务器出错的iconfont | | offline | 断网的iconfont |

Bug&Tips

• 由于小程序的限制，组件内部的样式作用不到 slot 插槽 上。所以如果自定义组件 icon 可能会导致样式不一致。