From 0ec1a62e596c363f3f017d6ac3b374a1b5caa7c5 Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 25 Jan 2021 23:41:58 +0800 Subject: [PATCH] fix(menu): top submenu disappeared problem #214 --- CHANGELOG.zh_CN.md | 1 + build/config/lessModifyVars.ts | 3 +- package.json | 2 +- src/components/Menu/src/BasicMenu.vue | 23 +- .../Menu/src/components/BasicMenuItem.vue | 20 +- .../Menu/src/components/BasicSubMenuItem.vue | 10 +- .../Menu/src/components/MenuItemContent.vue | 15 +- src/components/Menu/src/index.less | 292 +----------------- src/layouts/default/menu/useLayoutMenu.ts | 3 - src/layouts/page/ParentView.vue | 7 +- src/layouts/page/index.vue | 9 +- src/layouts/page/useCache.ts | 7 + yarn.lock | 8 +- 13 files changed, 48 insertions(+), 352 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 3c581a27..605d637a 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -15,6 +15,7 @@ - 修复 form 表单初始化值为 0 问题 - 修复表格换行问题 - 修复菜单外链不跳转 +- 修复菜单顶部显示问题 ## 2.0.0-rc.17 (2020-01-18) diff --git a/build/config/lessModifyVars.ts b/build/config/lessModifyVars.ts index f2ebcf2a..716b9308 100644 --- a/build/config/lessModifyVars.ts +++ b/build/config/lessModifyVars.ts @@ -1,7 +1,8 @@ /** * less global variable */ -const primaryColor = '#018ffb'; +const primaryColor = '#0084f4'; +// const primaryColor = '#018ffb'; // const primaryColor = '#0065cc'; //{ const modifyVars = { diff --git a/package.json b/package.json index 18052975..2ee04d85 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "@typescript-eslint/eslint-plugin": "^4.14.0", "@typescript-eslint/parser": "^4.14.0", "@vitejs/plugin-legacy": "^1.2.1", - "@vitejs/plugin-vue": "^1.1.2", + "@vitejs/plugin-vue": "1.1.0", "@vitejs/plugin-vue-jsx": "^1.0.2", "@vue/compiler-sfc": "^3.0.5", "@vuedx/typecheck": "^0.6.0", diff --git a/src/components/Menu/src/BasicMenu.vue b/src/components/Menu/src/BasicMenu.vue index 2def9340..0d429224 100644 --- a/src/components/Menu/src/BasicMenu.vue +++ b/src/components/Menu/src/BasicMenu.vue @@ -13,13 +13,7 @@ v-bind="getInlineCollapseOptions" > @@ -46,6 +40,7 @@ // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { listenerLastChangeTab } from '/@/logics/mitt/tabChange'; + import { getAllParentPath } from '/@/router/helper/menuHelper'; export default defineComponent({ name: 'BasicMenu', @@ -96,16 +91,12 @@ prefixCls, `justify-${align}`, { - [`${prefixCls}--hide-title`]: !unref(showTitle), - [`${prefixCls}--collapsed-show-title`]: props.collapsedShowTitle, [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit), [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu), }, ]; }); - const showTitle = computed(() => props.collapsedShowTitle && unref(getCollapsed)); - const getInlineCollapseOptions = computed(() => { const isInline = props.mode === MenuModeEnum.INLINE; @@ -135,7 +126,7 @@ } ); - async function handleMenuClick({ key, keyPath }: { key: string; keyPath: string[] }) { + async function handleMenuClick({ key }: { key: string; keyPath: string[] }) { const { beforeClickFn } = props; if (beforeClickFn && isFunction(beforeClickFn)) { const flag = await beforeClickFn(key); @@ -144,7 +135,9 @@ emit('menuClick', key); isClickGo.value = true; - menuState.openKeys = keyPath; + // const parentPath = await getCurrentParentPath(key); + + // menuState.openKeys = [parentPath]; menuState.selectedKeys = [key]; } @@ -160,7 +153,8 @@ const parentPath = await getCurrentParentPath(path); menuState.selectedKeys = [parentPath]; } else { - menuState.selectedKeys = [path]; + const parentPaths = await getAllParentPath(props.items, path); + menuState.selectedKeys = parentPaths; } } @@ -172,7 +166,6 @@ getMenuClass, handleOpenChange, getOpenKeys, - showTitle, ...toRefs(menuState), }; }, diff --git a/src/components/Menu/src/components/BasicMenuItem.vue b/src/components/Menu/src/components/BasicMenuItem.vue index 005820d9..45ae15c7 100644 --- a/src/components/Menu/src/components/BasicMenuItem.vue +++ b/src/components/Menu/src/components/BasicMenuItem.vue @@ -1,10 +1,11 @@