123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <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';
-
- {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>
|