Nobody Pays (for) Magazines

    vi-abnormal-tips

    0.0.3 • Public • Published

    异常信息提示组件

    使用

    • 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 可能会导致样式不一致。

    Install

    npm i vi-abnormal-tips

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    36.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • ashersun