From de1f00628479c4d31e6ed904d4b0fd7e312cc030 Mon Sep 17 00:00:00 2001 From: vben Date: Sat, 5 Dec 2020 16:47:16 +0800 Subject: [PATCH] fix(menu): fix the calculation error of the top menu width --- CHANGELOG.zh_CN.md | 3 + package.json | 3 +- src/layouts/default/header/LayoutHeader.tsx | 64 +++++++++++++-------- yarn.lock | 28 +++++++-- 4 files changed, 70 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 6c3e1256449..d93ff714b2f 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -20,12 +20,15 @@ - 首屏 loading 修改 - 升级`vue`到`3.0.4` +- 升级`ant-design-vue`到`2.0.0-rc.3` +- 重新引入`vueuse` - 移除 route meta 内的`afterCloseLoading`属性 ### 🐛 Bug Fixes - 修复表格 i18n 错误 - 修复菜单图标大小不一致 +- 修复顶部菜单宽度计算问题 ## 2.0.0-rc.12 (2020-11-30) diff --git a/package.json b/package.json index 27f9b3cb5f0..ac4d26c874f 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ }, "dependencies": { "@iconify/iconify": "^2.0.0-rc.2", - "ant-design-vue": "^2.0.0-rc.2", + "@vueuse/core": "^4.0.0-rc.6", + "ant-design-vue": "^2.0.0-rc.3", "apexcharts": "3.22.0", "axios": "^0.21.0", "crypto-es": "^1.2.6", diff --git a/src/layouts/default/header/LayoutHeader.tsx b/src/layouts/default/header/LayoutHeader.tsx index c8e7ae152a0..85863924810 100644 --- a/src/layouts/default/header/LayoutHeader.tsx +++ b/src/layouts/default/header/LayoutHeader.tsx @@ -8,6 +8,8 @@ import { unref, computed, ref, + nextTick, + watchEffect, // nextTick } from 'vue'; @@ -30,7 +32,7 @@ import { useModal } from '/@/components/Modal'; import { useFullscreen } from '/@/hooks/web/useFullScreen'; import { useTabs } from '/@/hooks/web/useTabs'; -// import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; +import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useRootSetting } from '/@/hooks/setting/useRootSetting'; @@ -68,9 +70,9 @@ export default defineComponent({ fixed: propTypes.bool, }, setup(props) { - // let logoEl: Element | null | undefined; + let logoEl: Element | null | undefined; - // const logoWidthRef = ref(200); + const logoWidthRef = ref(200); const logoRef = ref(null); const injectValue = useLayoutContext(); @@ -78,7 +80,13 @@ export default defineComponent({ const { refreshPage } = useTabs(); const { t } = useI18n(); - const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting(); + const { + getShowTopMenu, + getShowHeaderTrigger, + getSplit, + getTopMenuAlign, + getIsHorizontal, + } = useMenuSetting(); const { getShowLocale } = useLocaleSetting(); const { getUseErrorHandle, getShowBreadCrumbIcon } = useRootSetting(); @@ -98,22 +106,13 @@ export default defineComponent({ const [register, { openModal }] = useModal(); const { toggleFullscreen, isFullscreenRef } = useFullscreen(); - // useWindowSizeFn( - // () => { - // nextTick(() => { - // if (!unref(getShowTopMenu)) return; - // let width = 0; - // if (!logoEl) { - // logoEl = unref(logoRef)?.$el; - // } else { - // width += logoEl.clientWidth; - // } - // logoWidthRef.value = width + 80; - // }); - // }, - // 200, - // { immediate: true } - // ); + useWindowSizeFn( + () => { + calcTopMenuWidth(); + }, + 100, + { immediate: false } + ); const headerClass = computed(() => { const theme = unref(getHeaderTheme); @@ -132,6 +131,25 @@ export default defineComponent({ return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null; }); + watchEffect(() => { + if (unref(getIsHorizontal)) { + calcTopMenuWidth(); + } + }); + + function calcTopMenuWidth() { + nextTick(() => { + if (!unref(getShowTopMenu)) return; + let width = 0; + if (!logoEl) { + logoEl = unref(logoRef)?.$el; + } + if (!logoEl) return; + width += logoEl.clientWidth; + logoWidthRef.value = width + 80; + }); + } + function handleToErrorList() { push(PageEnum.ERROR_LOG_PAGE).then(() => { errorStore.commitErrorListCountState(0); @@ -143,7 +161,7 @@ export default defineComponent({ } function renderHeaderContent() { - // const width = unref(logoWidthRef); + const width = unref(logoWidthRef); return (
{unref(getShowHeaderLogo) && ( @@ -162,8 +180,8 @@ export default defineComponent({ )} {unref(getShowTopMenu) && unref(isPc) && ( - //
-
+
+ {/*
*/}