From c5f0dbdd43e82007e90e01074cdeb32225a8fd91 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Sat, 12 Oct 2024 17:16:35 +0800 Subject: [PATCH 1/3] fix(menu): fix submenu parent item active status on mounted --- src/menu/submenu.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx index 0d3d6da20..9e40f139a 100644 --- a/src/menu/submenu.tsx +++ b/src/menu/submenu.tsx @@ -13,6 +13,7 @@ import { reactive, } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; +import get from 'lodash/get'; import props from './submenu-props'; import { renderContent, renderTNodeJSX } from '../utils/render-tnode'; import FakeArrow from '../common-components/fake-arrow'; @@ -27,9 +28,10 @@ import { TdSubmenuProps } from './type'; import useCollapseAnimation from '../hooks/useCollapseAnimation'; const keepAnimationMixins = getKeepAnimationMixins(); +const submenuName = 'TSubmenu'; export default defineComponent({ - name: 'TSubmenu', + name: submenuName, components: { FakeArrow, }, @@ -38,7 +40,7 @@ export default defineComponent({ ripple: Ripple, }, props, - setup(props) { + setup(props, { slots }) { const menu = inject('TdMenu'); const { theme, activeValues, expandValues, mode, isHead, open, @@ -216,10 +218,51 @@ export default defineComponent({ while (node && !/^t(head)?menu/i.test(node.vnode?.tag)) { if (/submenu/i.test(node.vnode?.tag)) { isNested.value = true; + break; } node = node?.parent; } + const activeValue = menu.activeValue.value; + if (activeValue !== props.value && mode.value === 'popup') { + const childNode = slots.default() || []; + // 递归获取子菜单 处理折叠场景初始化时子菜单item未渲染，没有加入 vMenu，导致没有正常高亮父节点的展示问题 + for (let i = 0; i < childNode.length; i++) { + const item = childNode[i]; + // 菜单最多支持三级，所以可能有两层子菜单嵌套 + if (get(item, 'componentOptions.Ctor.extendOptions.name') === submenuName) { + const submenu = item; + const subChildNode = submenu.componentOptions.children || []; + for (let j = 0; j < subChildNode.length; j++) { + const subMenuChildItem = subChildNode[j]; + const menuItemValue = (subMenuChildItem.componentOptions.propsData as TdSubmenuProps)?.value; + const subMenuItemValue = (submenu.componentOptions.propsData as TdSubmenuProps)?.value; + if (menuItemValue === activeValue) { + // 需要将子菜单及其二级节点接入 vMenu + menu?.vMenu?.add({ + value: subMenuItemValue, + parent: props.value, + }); + menu?.vMenu?.add({ + value: menuItemValue, + parent: subMenuItemValue, + }); + // 找到需要高亮的子菜单即退出循环 + break; + } + } + } + const menuItemValue = (item.componentOptions.propsData as TdSubmenuProps)?.value; + if (menuItemValue === activeValue) { + menu?.vMenu?.add({ + value: menuItemValue, + parent: props.value, + }); + // 找到需要高亮的子菜单即退出循环 + break; + } + } + } }); return { From b1647a16b70ade2778a93b490cef7eb04c28c165 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Sat, 12 Oct 2024 17:27:03 +0800 Subject: [PATCH 2/3] chore: optimize --- src/menu/submenu.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx index 9e40f139a..9a48b2630 100644 --- a/src/menu/submenu.tsx +++ b/src/menu/submenu.tsx @@ -223,9 +223,9 @@ export default defineComponent({ } node = node?.parent; } - const activeValue = menu.activeValue.value; + const activeValue = menu?.activeValue.value; if (activeValue !== props.value && mode.value === 'popup') { - const childNode = slots.default() || []; + const childNode = slots.default?.() || []; // 递归获取子菜单 处理折叠场景初始化时子菜单item未渲染，没有加入 vMenu，导致没有正常高亮父节点的展示问题 for (let i = 0; i < childNode.length; i++) { const item = childNode[i]; @@ -235,17 +235,18 @@ export default defineComponent({ const subChildNode = submenu.componentOptions.children || []; for (let j = 0; j < subChildNode.length; j++) { const subMenuChildItem = subChildNode[j]; + const subMenuValue = (submenu.componentOptions.propsData as TdSubmenuProps)?.value; const menuItemValue = (subMenuChildItem.componentOptions.propsData as TdSubmenuProps)?.value; - const subMenuItemValue = (submenu.componentOptions.propsData as TdSubmenuProps)?.value; + if (menuItemValue === activeValue) { - // 需要将子菜单及其二级节点接入 vMenu + // 需要将子菜单及其二级节点都接入 vMenu menu?.vMenu?.add({ - value: subMenuItemValue, + value: subMenuValue, parent: props.value, }); menu?.vMenu?.add({ value: menuItemValue, - parent: subMenuItemValue, + parent: subMenuValue, }); // 找到需要高亮的子菜单即退出循环 break; From f3ebe1585c7bef1936e53c00e363e55e5b67cfe2 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Sat, 12 Oct 2024 19:25:19 +0800 Subject: [PATCH 3/3] chore: revert name --- src/menu/submenu.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx index 9a48b2630..57882ee56 100644 --- a/src/menu/submenu.tsx +++ b/src/menu/submenu.tsx @@ -28,10 +28,9 @@ import { TdSubmenuProps } from './type'; import useCollapseAnimation from '../hooks/useCollapseAnimation'; const keepAnimationMixins = getKeepAnimationMixins(); -const submenuName = 'TSubmenu'; export default defineComponent({ - name: submenuName, + name: 'TSubmenu', components: { FakeArrow, }, @@ -226,6 +225,8 @@ export default defineComponent({ const activeValue = menu?.activeValue.value; if (activeValue !== props.value && mode.value === 'popup') { const childNode = slots.default?.() || []; + const submenuName = 'TSubmenu'; + // 递归获取子菜单 处理折叠场景初始化时子菜单item未渲染，没有加入 vMenu，导致没有正常高亮父节点的展示问题 for (let i = 0; i < childNode.length; i++) { const item = childNode[i];