bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-avatar-group/u-avatar-group.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,103 @@
<template>
   <view class="u-avatar-group">
      <view
          class="u-avatar-group__item"
          v-for="(item, index) in showUrl"
          :key="index"
          :style="{
            marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
         }"
      >
         <u-avatar
             :size="size"
             :shape="shape"
             :mode="mode"
             :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item"
         ></u-avatar>
         <view
             class="u-avatar-group__item__show-more"
             v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
            @tap="clickHandler"
         >
            <u--text
                color="#ffffff"
                :size="size * 0.4"
                :text="`+${extraValue || urls.length - showUrl.length}`"
               align="center"
               customStyle="justify-content: center"
            ></u--text>
         </view>
      </view>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * AvatarGroup  å¤´åƒç»„
    * @description æœ¬ç»„件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
    * @tutorial https://www.uviewui.com/components/avatar.html
    * 
    * @property {Array}           urls     å¤´åƒå›¾ç‰‡ç»„ ï¼ˆé»˜è®¤ [] ï¼‰
    * @property {String | Number} maxCount æœ€å¤šå±•ç¤ºçš„头像数量 ï¼ˆ é»˜è®¤ 5 ï¼‰
    * @property {String}          shape    å¤´åƒå½¢çŠ¶ï¼ˆ 'circle' (默认) | 'square' ï¼‰
    * @property {String}          mode     å›¾ç‰‡è£å‰ªæ¨¡å¼ï¼ˆé»˜è®¤ 'scaleToFill' ï¼‰
    * @property {Boolean}         showMore è¶…出maxCount时是否显示查看更多的提示 ï¼ˆé»˜è®¤ true ï¼‰
    * @property {String | Number} size      å¤´åƒå¤§å° ï¼ˆé»˜è®¤ 40 ï¼‰
    * @property {String}          keyName  æŒ‡å®šä»Žæ•°ç»„的对象元素中读取哪个属性作为图片地址 
    * @property {String | Number} gap      å¤´åƒä¹‹é—´çš„遮挡比例（0.4代表遮挡40%）  ï¼ˆé»˜è®¤ 0.5 ï¼‰
    * @property {String | Number} extraValue  éœ€é¢å¤–显示的值
    * @event    {Function}        showMore å¤´åƒç»„更多点击
    * @example  <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
    */
   export default {
      name: 'u-avatar-group',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {

         }
      },
      computed: {
         showUrl() {
            return this.urls.slice(0, this.maxCount)
         }
      },
      methods: {
         clickHandler() {
            this.$emit('showMore')
         }
      },
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-avatar-group {
      @include flex;

      &__item {
         margin-left: -10px;
         position: relative;

         &--no-indent {
            // å¦‚果你想质疑作者不会使用:first-child，说明你太年轻，因为nvue不支持
            margin-left: 0;
         }

         &__show-more {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.3);
            @include flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
         }
      }
   }
</style>