first commit

uni_modules/tdesign-uniapp/components/avatar-group/avatar-group.vue

@@ -0,0 +1,121 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="className"
+  >
+    <slot />
+    <view :class="classPrefix + '__collapse--slot'">
+      <slot name="collapse-avatar" />
+    </view>
+    <view
+      v-if="max && max < length"
+      :class="classPrefix + '__collapse--default'"
+      @click="onCollapsedItemClick"
+    >
+      <t-avatar
+        :t-class-image="prefix + '-avatar--border ' + prefix + '-avatar--border-' + size + ' ' + tClassImage"
+        :t-class-content="tClassContent"
+        :size="size"
+        :shape="shape"
+        :icon="collapseAvatar ? '' : 'user-add'"
+        aria-role="none"
+      >
+        {{ collapseAvatar }}
+      </t-avatar>
+    </view>
+  </view>
+</template>
+<script>
+import TAvatar from '../avatar/avatar';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import avatarGroupProps from './props';
+
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-avatar-group`;
+const AVATAR_GROUP_INIT_Z_INDEX = 50;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-image`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.Avatar)],
+  components: {
+    TAvatar,
+  },
+  props: {
+    ...avatarGroupProps,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      hasChild: true,
+      length: 0,
+      className: '',
+      tools,
+    };
+  },
+  watch: {
+    cascading: 'setClass',
+    size: 'setClass',
+  },
+  mounted() {
+    this.setClass();
+    this.length = this.children?.length || 0;
+    if (this.length) {
+      this.handleMax();
+    }
+  },
+  methods: {
+    setClass() {
+      const { cascading, size } = this;
+      const direction = cascading.split('-')[0];
+      const classList = [
+        name,
+        this.tClass,
+        `${name}-offset-${direction}`,
+        `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
+      ];
+
+      this.className = classList.join(' ');
+    },
+
+    handleMax() {
+      const { max, cascading } = this;
+      const len = this.children.length;
+      if (!max || max > len) return;
+
+      const restAvatars = this.children.splice(max, len - max);
+
+      const isLeft = cascading === 'left-up';
+      this.children.forEach((child, index) => {
+        child.setStyle({
+          zIndex: isLeft && `calc(var(--td-avatar-group-init-z-index, ${AVATAR_GROUP_INIT_Z_INDEX}) - ${index})`,
+          padding: 'var(--td-avatar-group-line-spacing, 2px) 0',
+        });
+      });
+
+      restAvatars.forEach((child) => {
+        child.hide();
+      });
+    },
+    onCollapsedItemClick(e) {
+      this.$emit('collapsed-item-click', e);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './avatar-group.css';
+</style>