canrd-outside / order-erp-front · Commits

Commit 554f4615a17582add616df93e8f61d9286a664bf

Authored by You
Committed by GitHub
1 parent d21578ab

fix: 菜单响应式隐藏时宽度计算错误 (#1945) 

Co-authored-by: zeozhou <zeozhou@tencent.com>
Inline Side-by-side
Showing 4 changed files with 18 additions and 7 deletions
src/hooks/setting/useMenuSetting.ts
  View file @554f461
@@ -101,8 +101,12 @@ export function useMenuSetting() { @@ -101,8 +101,12 @@ export function useMenuSetting() {
101 }); 101 });
102 102
103 const getMiniWidthNumber = computed(() => { 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 const getCalcContentWidth = computed(() => { 112 const getCalcContentWidth = computed(() => {
src/layouts/default/sider/useLayoutSider.ts
  View file @554f461
1 import type { Ref } from 'vue'; 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 import { TriggerEnum } from '/@/enums/menuEnum'; 5 import { TriggerEnum } from '/@/enums/menuEnum';
6 6
7 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; 7 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
8 import { useDebounceFn } from '@vueuse/core'; 8 import { useDebounceFn } from '@vueuse/core';
  9 +import { useAppStore } from '/@/store/modules/app';
9 10
10 /** 11 /**
11 * Handle related operations of menu events 12 * Handle related operations of menu events
12 */ 13 */
13 export function useSiderEvent() { 14 export function useSiderEvent() {
14 - const brokenRef = ref(false);  
15 - 15 + const appStore = useAppStore();
16 const { getMiniWidthNumber } = useMenuSetting(); 16 const { getMiniWidthNumber } = useMenuSetting();
17 17
18 const getCollapsedWidth = computed(() => { 18 const getCollapsedWidth = computed(() => {
19 - return unref(brokenRef) ? 0 : unref(getMiniWidthNumber); 19 + return unref(getMiniWidthNumber);
20 }); 20 });
21 21
22 function onBreakpointChange(broken: boolean) { 22 function onBreakpointChange(broken: boolean) {
23 - brokenRef.value = broken; 23 + appStore.setProjectConfig({
  24 + menuSetting: {
  25 + siderHidden: broken,
  26 + },
  27 + });
24 } 28 }
25 29
26 return { getCollapsedWidth, onBreakpointChange }; 30 return { getCollapsedWidth, onBreakpointChange };
src/settings/projectSetting.ts
  View file @554f461
@@ -83,6 +83,8 @@ const setting: ProjectConfig = { @@ -83,6 +83,8 @@ const setting: ProjectConfig = {
83 fixed: true, 83 fixed: true,
84 // Menu collapse 84 // Menu collapse
85 collapsed: false, 85 collapsed: false,
  86 + // When sider hide because of the responsive layout
  87 + siderHidden: false,
86 // Whether to display the menu name when folding the menu 88 // Whether to display the menu name when folding the menu
87 collapsedShowTitle: false, 89 collapsedShowTitle: false,
88 // Whether it can be dragged 90 // Whether it can be dragged
types/config.d.ts
  View file @554f461
@@ -16,6 +16,7 @@ export interface MenuSetting { @@ -16,6 +16,7 @@ export interface MenuSetting {
16 bgColor: string; 16 bgColor: string;
17 fixed: boolean; 17 fixed: boolean;
18 collapsed: boolean; 18 collapsed: boolean;
  19 + siderHidden: boolean;
19 canDrag: boolean; 20 canDrag: boolean;
20 show: boolean; 21 show: boolean;
21 hidden: boolean; 22 hidden: boolean;