fix: z-index

Tencent · Apr 23, 2024 · 19c36ef · 19c36ef
1 parent 75e89de
commit 19c36ef
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
@@ -631,6 +631,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
     
     <div
       class="t-avatar__wrapper"
+      style="z-index: 100;"
     >
       <div
         class="t-avatar__badge"
@@ -698,6 +699,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
     </div>
     <div
       class="t-avatar__wrapper"
+      style="z-index: 90;"
     >
       <div
         class="t-avatar__badge"
@@ -765,6 +767,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
     </div>
     <div
       class="t-avatar__wrapper"
+      style="z-index: 80;"
     >
       <div
         class="t-avatar__badge"
@@ -832,6 +835,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
     </div>
     <div
       class="t-avatar__wrapper"
+      style="z-index: 70;"
     >
       <div
         class="t-avatar__badge"
@@ -899,6 +903,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
     </div>
     <div
       class="t-avatar__wrapper"
+      style="z-index: 60;"
     >
       <div
         class="t-avatar__badge"
@@ -1630,6 +1635,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
           
           <div
             class="t-avatar__wrapper"
+            style="z-index: 100;"
           >
             <div
               class="t-avatar__badge"
@@ -1697,6 +1703,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-avatar__wrapper"
+            style="z-index: 90;"
           >
             <div
               class="t-avatar__badge"
@@ -1764,6 +1771,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-avatar__wrapper"
+            style="z-index: 80;"
           >
             <div
               class="t-avatar__badge"
@@ -1831,6 +1839,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-avatar__wrapper"
+            style="z-index: 70;"
           >
             <div
               class="t-avatar__badge"
@@ -1898,6 +1907,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-avatar__wrapper"
+            style="z-index: 60;"
           >
             <div
               class="t-avatar__badge"

diff --git a/src/avatar/__test__/index.test.jsx b/src/avatar/__test__/index.test.jsx
@@ -121,7 +121,7 @@ describe('avatar-group', async () => {
 
   it(': max', async () => {
     const wrapper = mount(() => (
-      <AvatarGroup max={1}>
+      <AvatarGroup max={2}>
         <Avatar image={IMAGE}></Avatar>
         <Avatar image={IMAGE}></Avatar>
         <Avatar image={IMAGE}></Avatar>
@@ -130,8 +130,7 @@ describe('avatar-group', async () => {
       </AvatarGroup>
     ));
     const avatarList = wrapper.findAllComponents(Avatar);
-     expect(avatarList.length).toBe(2);
-     expect(avatarList[0].find('img').exists()).toBeTruthy()
-     expect(avatarList[1].text()).toBe('+4');
+    expect(avatarList.length).toBe(3);
+    expect(avatarList[avatarList.length-1].text()).toBe('+3');
   });
 });
diff --git a/src/avatar/avatar-group.tsx b/src/avatar/avatar-group.tsx
@@ -26,8 +26,10 @@ export default defineComponent({
       `${avatarGroupClass.value}-offset-${direction}-${props.size.indexOf('px') > -1 ? 'medium' : props.size}`,
     ]);
 
-    const readerAvatarItems = (children: Array<RendererNode>) => {
+    const readerAvatar = () => {
+      const children: Array<RendererNode> = renderTNodeJSX('default');
       const allChildren: Array<RendererNode> = [];
+
       children.forEach((child) => {
         if (child.type === Fragment) {
           allChildren.push(...child.children);
@@ -36,37 +38,36 @@ export default defineComponent({
         }
       });
 
-      let avatarItems: Array<RendererNode> = [];
       let isShowCollapse = false;
+      let avatarList: Array<RendererNode> = [];
       if (allChildren.length > props.max) {
-        avatarItems = allChildren.slice(0, props.max);
+        avatarList = allChildren.slice(0, props.max);
         isShowCollapse = true;
       } else {
-        avatarItems = allChildren;
+        avatarList = allChildren;
       }
 
       if (props.cascading === 'left-up') {
         const defaultZIndex = 100;
-        for (let index = 0; index < avatarItems.length; index++) {
-          avatarItems[index].props.style = { style: `z-index: ${defaultZIndex - index * 10}` };
+        for (let index = 0; index < avatarList.length; index++) {
+          avatarList[index].props.style = `z-index: ${defaultZIndex - index * 10}`;
         }
       }
 
       if (isShowCollapse) {
         const collapseAvatar = renderTNodeJSX('collapseAvatar');
-        avatarItems.push(
-          <TAvatar size={avatarItems[0].size || props.size}>
+        avatarList.push(
+          <TAvatar size={avatarList[0].size || props.size}>
             {collapseAvatar || `+${allChildren.length - props.max}`}
           </TAvatar>,
         );
       }
 
-      return avatarItems;
+      return avatarList;
     };
 
     return () => {
-      const children = renderTNodeJSX('default');
-      return <div class={avatarGroupClasses.value}>{props.max ? readerAvatarItems(children) : children}</div>;
+      return <div class={avatarGroupClasses.value}>{readerAvatar()}</div>;
     };
   },
 });