Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(menu): fix submenu parent item active status on mounted #3357

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

fix(menu): fix submenu parent item active status on mounted #3357

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5f0dbd
fix(menu): fix submenu parent item active status on mounted
uyarn Oct 12, 2024
b1647a1
chore: optimize
uyarn Oct 12, 2024
f3ebe15
chore: revert name
uyarn Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 46 additions & 2 deletions src/menu/submenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Copy link
Collaborator

@chaishi chaishi Oct 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的名字改的我有点慌，曾经这里也写的是变量，但是打包后，失效了

然后有一次，就全部重新改成字符串了

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个地方还是字符串没变 是方便后面取该组件使用

components: {
FakeArrow,
},
Expand All @@ -38,7 +40,7 @@ export default defineComponent({
ripple: Ripple,
},
props,
setup(props) {
setup(props, { slots }) {
const menu = inject<TdMenuInterface>('TdMenu');
const {
theme, activeValues, expandValues, mode, isHead, open,
Expand Down Expand Up @@ -216,10 +218,52 @@ 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') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的代码板块理解过于复杂，建议定义单独的函数分别计算

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 subMenuValue = (submenu.componentOptions.propsData as TdSubmenuProps)?.value;
const menuItemValue = (subMenuChildItem.componentOptions.propsData as TdSubmenuProps)?.value;

if (menuItemValue === activeValue) {
// 需要将子菜单及其二级节点都接入 vMenu
menu?.vMenu?.add({
value: subMenuValue,
parent: props.value,
});
menu?.vMenu?.add({
value: menuItemValue,
parent: subMenuValue,
});
// 找到需要高亮的子菜单即退出循环
break;
}
}
}
const menuItemValue = (item.componentOptions.propsData as TdSubmenuProps)?.value;
if (menuItemValue === activeValue) {
menu?.vMenu?.add({
value: menuItemValue,
parent: props.value,
});
// 找到需要高亮的子菜单即退出循环
break;
}
}
}
});

return {
Expand Down
Loading