fix(menu): expandType=normal时可以自动折叠过多的menuItem

closed #1285
Tencent · Sep 26, 2022 · f7f64a5 · f7f64a5
1 parent 2497428
commit f7f64a5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/menu/head-menu.tsx b/src/menu/head-menu.tsx
@@ -60,7 +60,7 @@ export default defineComponent({
           } else if (type === 'remove') {
             expanded.splice(index, 1);
           }
-        } else {
+        } else if (mode.value === 'normal' && value !== undefined) {
           expanded.splice(0, 1);
           if (index === -1) {
             expanded.push(value);
@@ -154,7 +154,7 @@ export default defineComponent({
     const formatContent = () => {
       let slot = ctx.slots.default?.() || ctx.slots.content?.() || [];
 
-      if (mode.value === 'popup' && menuRef.value && innerRef.value) {
+      if (menuRef.value && innerRef.value) {
         const validNodes = Array.from(menuRef.value.childNodes ?? []).filter(
           (item) => item.nodeName !== '#text' || item.nodeValue,
         ) as HTMLElement[];
@@ -178,7 +178,11 @@ export default defineComponent({
         const subMore = slot.slice(sliceIndex);
 
         if (subMore.length) {
-          slot = defaultSlot.concat(<Submenu title={() => <EllipsisIcon />}>{subMore}</Submenu>);
+          slot = defaultSlot.concat(
+            <Submenu expandType="popup" title={() => <EllipsisIcon />}>
+              {subMore}
+            </Submenu>,
+          );
         }
       }
       return slot;

diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx
@@ -27,9 +27,10 @@ export default defineComponent({
   setup(props, ctx) {
     const classPrefix = usePrefixClass();
     const menu = inject<TdMenuInterface>('TdMenu');
-    const { theme, activeValues, expandValues, mode, isHead, open } = menu;
+    const { theme, activeValues, expandValues, isHead, open } = menu;
     const submenu = inject<TdSubMenuInterface>('TdSubmenu', {});
     const { setSubPopup, closeParentPopup } = submenu;
+    const mode = computed(() => ctx.attrs.expandType || menu.mode.value);
 
     const menuItems = ref([]); // 因composition-api的缺陷，不用reactive， 详见：https://github.com/vuejs/composition-api/issues/637
     const isActive = computed(() => activeValues.value.indexOf(props.value) > -1);

diff --git a/src/menu/v-menu.ts b/src/menu/v-menu.ts
@@ -86,7 +86,7 @@ export default class VMenu {
       node.parent = this.data;
     } else if (this.data.children.length > 0) {
       const pNode = DFS(this.data, parent);
-      if (pNode) {
+      if (pNode && !pNode.children.some((child) => child.value === node.value)) {
         pNode.children.push(node);
       } else {
         this.cache.add(node);