| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 2 | <view class="u-avatar-group"> |
| 3 | <view | |
| 4 | class="u-avatar-group__item" | |
| 5 | v-for="(item, index) in showUrl" | |
| 6 | :key="index" | |
| 7 | :style="{ | |
| 8 | marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap) | |
| 9 | }" | |
| 10 | > | |
| 11 | <u-avatar | |
| 12 | :size="size" | |
| 13 | :shape="shape" | |
| 14 | :mode="mode" | |
| 15 | :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item" | |
| 16 | ></u-avatar> | |
| 17 | <view | |
| 18 | class="u-avatar-group__item__show-more" | |
| 19 | v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)" | |
| 20 | @tap="clickHandler" | |
| 21 | > | |
| 22 | <u--text | |
| 23 | color="#ffffff" | |
| 24 | :size="size * 0.4" | |
| 25 | :text="`+${extraValue || urls.length - showUrl.length}`" | |
| 26 | align="center" | |
| 27 | customStyle="justify-content: center" | |
| 28 | ></u--text> | |
| 29 | </view> | |
| 30 | </view> | |
| 31 | </view> | |
| 32 | </template> | |
| 33 | ||
| 34 | <script> | |
| 35 | import props from './props.js'; | |
| 36 | /** | |
| 37 | * AvatarGroup 头像组 | |
| 38 | * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。 | |
| 39 | * @tutorial https://www.uviewui.com/components/avatar.html | |
| 40 | * | |
| 41 | * @property {Array} urls 头像图片组 （默认 [] ） | |
| 42 | * @property {String | Number} maxCount 最多展示的头像数量 （ 默认 5 ） | |
| 43 | * @property {String} shape 头像形状（ 'circle' (默认) | 'square' ） | |
| 44 | * @property {String} mode 图片裁剪模式（默认 'scaleToFill' ） | |
| 45 | * @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 （默认 true ） | |
| 46 | * @property {String | Number} size 头像大小 （默认 40 ） | |
| 47 | * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址 | |
| 48 | * @property {String | Number} gap 头像之间的遮挡比例（0.4代表遮挡40%） （默认 0.5 ） | |
| 49 | * @property {String | Number} extraValue 需额外显示的值 | |
| 50 | * @event {Function} showMore 头像组更多点击 | |
| 51 | * @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=> | |
| 52 | */ | |
| 53 | export default { | |
| 54 | name: 'u-avatar-group', | |
| 55 | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], | |
| 56 | data() { | |
| 57 | return { | |
| 58 | ||
| 59 | } | |
| 60 | }, | |
| 61 | computed: { | |
| 62 | showUrl() { | |
| 63 | return this.urls.slice(0, this.maxCount) | |
| 64 | } | |
| 65 | }, | |
| 66 | methods: { | |
| 67 | clickHandler() { | |
| 68 | this.$emit('showMore') | |
| 69 | } | |
| 70 | }, | |
| 71 | } | |
| 72 | </script> | |
| 73 | ||
| 74 | <style lang="scss" scoped> | |
| 75 | @import "../../libs/css/components.scss"; | |
| 76 | ||
| 77 | .u-avatar-group { | |
| 78 | @include flex; | |
| 79 | ||
| 80 | &__item { | |
| 81 | margin-left: -10px; | |
| 82 | position: relative; | |
| 83 | ||
| 84 | &--no-indent { | |
| 85 | // 如果你想质疑作者不会使用:first-child，说明你太年轻，因为nvue不支持 | |
| 86 | margin-left: 0; | |
| 87 | } | |
| 88 | ||
| 89 | &__show-more { | |
| 90 | position: absolute; | |
| 91 | top: 0; | |
| 92 | bottom: 0; | |
| 93 | left: 0; | |
| 94 | right: 0; | |
| 95 | background-color: rgba(0, 0, 0, 0.3); | |
| 96 | @include flex; | |
| 97 | align-items: center; | |
| 98 | justify-content: center; | |
| 99 | border-radius: 100px; | |
| 100 | } | |
| 101 | } | |
| 102 | } | |
| 103 | </style> | |
