bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-empty/u-empty.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,128 @@
<template>
   <view
       class="u-empty"
       :style="[emptyStyle]"
       v-if="show"
   >
      <u-icon
          v-if="!isSrc"
          :name="mode === 'message' ? 'chat' : `empty-${mode}`"
          :size="iconSize"
          :color="iconColor"
          margin-top="14"
      ></u-icon>
      <image
          v-else
          :style="{
            width: $u.addUnit(width),
            height: $u.addUnit(height),
         }"
          :src="icon"
          mode="widthFix"
      ></image>
      <text
          class="u-empty__text"
          :style="[textStyle]"
      >{{text ? text : icons[mode]}}</text>
      <view class="u-empty__wrap" v-if="$slots.default || $slots.$default">
         <slot />
      </view>
   </view>
</template>

<script>
   import props from './props.js';

   /**
    * empty å†…容为空
    * @description è¯¥ç»„件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， æˆ‘们精心挑选了十几个场景的图标，方便您使用。
    * @tutorial https://www.uviewui.com/components/empty.html
    * @property {String}         icon      å†…置图标名称，或图片路径，建议绝对路径
    * @property {String}         text      æç¤ºæ–‡å­—
    * @property {String}         textColor   æ–‡å­—颜色 (默认 '#c0c4cc' )
    * @property {String | Number}   textSize   æ–‡å­—大小 ï¼ˆé»˜è®¤ 14 ï¼‰
    * @property {String}         iconColor   å›¾æ ‡çš„颜色 ï¼ˆé»˜è®¤ '#c0c4cc' ï¼‰
    * @property {String | Number}   iconSize   å›¾æ ‡çš„大小 ï¼ˆé»˜è®¤ 90 ï¼‰
    * @property {String}         mode      é€‰æ‹©é¢„置的图标类型 ï¼ˆé»˜è®¤ 'data' ï¼‰
    * @property {String | Number}   width      å›¾æ ‡å®½åº¦ï¼Œå•ä½px ï¼ˆé»˜è®¤ 160 ï¼‰
    * @property {String | Number}   height      å›¾æ ‡é«˜åº¦ï¼Œå•ä½px ï¼ˆé»˜è®¤ 160 ï¼‰
    * @property {Boolean}         show      æ˜¯å¦æ˜¾ç¤ºç»„件 ï¼ˆé»˜è®¤ true ï¼‰
    * @property {String | Number}   marginTop   ç»„件距离上一个元素之间的距离，默认px单位 ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {Object}         customStyle   å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    * 
    * @event {Function} click ç‚¹å‡»ç»„件时触发
    * @event {Function} close ç‚¹å‡»å…³é—­æŒ‰é’®æ—¶è§¦å‘
    * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
    */
   export default {
      name: "u-empty",
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            icons: {
               car: '购物车为空',
               page: '页面不存在',
               search: '没有搜索结果',
               address: '没有收货地址',
               wifi: '没有WiFi',
               order: '订单为空',
               coupon: '没有优惠券',
               favor: '暂无收藏',
               permission: '无权限',
               history: '无历史记录',
               news: '无新闻列表',
               message: '消息列表为空',
               list: '列表为空',
               data: '数据为空',
               comment: '暂无评论',
            }
         }
      },
      computed: {
         // ç»„件样式
         emptyStyle() {
            const style = {}
            style.marginTop = uni.$u.addUnit(this.marginTop)
            // åˆå¹¶customStyle样式，此参数通过mixin中的props传递
            return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style)
         },
         // æ–‡æœ¬æ ·å¼
         textStyle() {
            const style = {}
            style.color = this.textColor
            style.fontSize = uni.$u.addUnit(this.textSize)
            return style
         },
         // åˆ¤æ–­icon是否图片路径
         isSrc() {
            return this.icon.indexOf('/') >= 0
         }
      }
   }
</script>

<style lang="scss" scoped>
   @import '../../libs/css/components.scss';
   $u-empty-text-margin-top:20rpx !default;
   $u-empty-slot-margin-top:20rpx !default;

   .u-empty {
      @include flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &__text {
         @include flex;
         justify-content: center;
         align-items: center;
         margin-top: $u-empty-text-margin-top;
      }
   }
      .u-slot-wrap {
         @include flex;
         justify-content: center;
         align-items: center;
         margin-top:$u-empty-slot-margin-top;
      }
</style>