From 19c36ef0c92244ea9a07189a4d1fcd8c9b4a82a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 23 Apr 2024 21:29:51 +0800
Subject: [PATCH] fix: z-index
---
.../__test__/__snapshots__/demo.test.jsx.snap | 10 ++++++++
src/avatar/__test__/index.test.jsx | 7 +++---
src/avatar/avatar-group.tsx | 23 ++++++++++---------
3 files changed, 25 insertions(+), 15 deletions(-)
diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
index 501b1ef4d..44138474c 100644
--- 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`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar exhibitionVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
Avatar mobileVue demo works fine 1`] = `
{
it(': max', async () => {
const wrapper = mount(() => (
-
+
@@ -130,8 +130,7 @@ describe('avatar-group', async () => {
));
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
index afabc917b..366e4641f 100644
--- 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) => {
+ const readerAvatar = () => {
+ const children: Array = renderTNodeJSX('default');
const allChildren: Array = [];
+
children.forEach((child) => {
if (child.type === Fragment) {
allChildren.push(...child.children);
@@ -36,37 +38,36 @@ export default defineComponent({
}
});
- let avatarItems: Array = [];
let isShowCollapse = false;
+ let avatarList: Array = [];
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(
-
+ avatarList.push(
+
{collapseAvatar || `+${allChildren.length - props.max}`}
,
);
}
- return avatarItems;
+ return avatarList;
};
return () => {
- const children = renderTNodeJSX('default');
- return {props.max ? readerAvatarItems(children) : children}
;
+ return {readerAvatar()}
;
};
},
});