Commit 554f4615a17582add616df93e8f61d9286a664bf
Committed by
GitHub
GitHub
1 parent
d21578ab
fix: 菜单响应式隐藏时宽度计算错误 (#1945)
Co-authored-by: zeozhou <zeozhou@tencent.com>
Showing
4 changed files
with
18 additions
and
7 deletions
src/hooks/setting/useMenuSetting.ts
| ... | ... | @@ -101,8 +101,12 @@ export function useMenuSetting() { |
| 101 | 101 | }); |
| 102 | 102 | |
| 103 | 103 | const getMiniWidthNumber = computed(() => { |
| 104 | - const { collapsedShowTitle } = appStore.getMenuSetting; | |
| 105 | - return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH; | |
| 104 | + const { collapsedShowTitle, siderHidden } = appStore.getMenuSetting; | |
| 105 | + return siderHidden | |
| 106 | + ? 0 | |
| 107 | + : collapsedShowTitle | |
| 108 | + ? SIDE_BAR_SHOW_TIT_MINI_WIDTH | |
| 109 | + : SIDE_BAR_MINI_WIDTH; | |
| 106 | 110 | }); |
| 107 | 111 | |
| 108 | 112 | const getCalcContentWidth = computed(() => { | ... | ... |
src/layouts/default/sider/useLayoutSider.ts
| 1 | 1 | import type { Ref } from 'vue'; |
| 2 | 2 | |
| 3 | -import { computed, unref, onMounted, nextTick, ref } from 'vue'; | |
| 3 | +import { computed, unref, onMounted, nextTick } from 'vue'; | |
| 4 | 4 | |
| 5 | 5 | import { TriggerEnum } from '/@/enums/menuEnum'; |
| 6 | 6 | |
| 7 | 7 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
| 8 | 8 | import { useDebounceFn } from '@vueuse/core'; |
| 9 | +import { useAppStore } from '/@/store/modules/app'; | |
| 9 | 10 | |
| 10 | 11 | /** |
| 11 | 12 | * Handle related operations of menu events |
| 12 | 13 | */ |
| 13 | 14 | export function useSiderEvent() { |
| 14 | - const brokenRef = ref(false); | |
| 15 | - | |
| 15 | + const appStore = useAppStore(); | |
| 16 | 16 | const { getMiniWidthNumber } = useMenuSetting(); |
| 17 | 17 | |
| 18 | 18 | const getCollapsedWidth = computed(() => { |
| 19 | - return unref(brokenRef) ? 0 : unref(getMiniWidthNumber); | |
| 19 | + return unref(getMiniWidthNumber); | |
| 20 | 20 | }); |
| 21 | 21 | |
| 22 | 22 | function onBreakpointChange(broken: boolean) { |
| 23 | - brokenRef.value = broken; | |
| 23 | + appStore.setProjectConfig({ | |
| 24 | + menuSetting: { | |
| 25 | + siderHidden: broken, | |
| 26 | + }, | |
| 27 | + }); | |
| 24 | 28 | } |
| 25 | 29 | |
| 26 | 30 | return { getCollapsedWidth, onBreakpointChange }; | ... | ... |
src/settings/projectSetting.ts
| ... | ... | @@ -83,6 +83,8 @@ const setting: ProjectConfig = { |
| 83 | 83 | fixed: true, |
| 84 | 84 | // Menu collapse |
| 85 | 85 | collapsed: false, |
| 86 | + // When sider hide because of the responsive layout | |
| 87 | + siderHidden: false, | |
| 86 | 88 | // Whether to display the menu name when folding the menu |
| 87 | 89 | collapsedShowTitle: false, |
| 88 | 90 | // Whether it can be dragged | ... | ... |