fix(menu): fix scrillbar not work

Author: anncwb

CHANGELOG.zh_CN.md

@@ -1,3 +1,9 @@
+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复混合模式下滚动条丢失问题
+
 ## 2.0.0-rc.14 (2020-12-15)
 
 ### ✨ Features

src/components/Menu/src/BasicMenu.vue

@@ -90,9 +90,10 @@
       });
 
       const getMenuClass = computed(() => {
+        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
         return [
           prefixCls,
-          `justify-${unref(getTopMenuAlign)}`,
+          `justify-${align}`,
           {
             [`${prefixCls}--hide-title`]: !unref(showTitle),
             [`${prefixCls}--collapsed-show-title`]: props.collapsedShowTitle,

src/layouts/default/header/index.vue

@@ -7,6 +7,7 @@
         v-if="getShowHeaderLogo || getIsMobile"
         :class="`${prefixCls}-logo`"
         :theme="getHeaderTheme"
+        :style="getLogoWidth"
       />
       <LayoutTrigger
         v-if="(getShowContent && getShowHeaderTrigger && !getSplit) || getIsMobile"
@@ -103,7 +104,13 @@
     },
     setup(props) {
       const { prefixCls } = useDesign('layout-header');
-      const { getShowTopMenu, getShowHeaderTrigger, getSplit } = useMenuSetting();
+      const {
+        getShowTopMenu,
+        getShowHeaderTrigger,
+        getSplit,
+        getIsMixMode,
+        getMenuWidth,
+      } = useMenuSetting();
       const { getShowLocale } = useLocaleSetting();
       const { getUseErrorHandle } = useRootSetting();
 
@@ -131,6 +138,14 @@
         ];
       });
 
+      const getLogoWidth = computed(() => {
+        if (!unref(getIsMixMode)) {
+          return {};
+        }
+        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+        return { width: `${width}px` };
+      });
+
       const getSplitType = computed(() => {
         return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
       });
@@ -157,6 +172,7 @@
         getShowNotice,
         getUseLockPage,
         getUseErrorHandle,
+        getLogoWidth,
       };
     },
   });

src/layouts/default/menu/index.tsx

@@ -47,6 +47,7 @@ export default defineComponent({
       getMenuTheme,
       getCollapsed,
       getAccordion,
+      getIsHorizontal,
       getIsSidebarType,
     } = useMenuSetting();
     const { getShowLogo } = useRootSetting();
@@ -66,7 +67,12 @@ export default defineComponent({
     const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
 
     const getUseScroll = computed(() => {
-      return unref(getIsSidebarType) || props.splitType === MenuSplitTyeEnum.LEFT;
+      return (
+        !unref(getIsHorizontal) &&
+        (unref(getIsSidebarType) ||
+          props.splitType === MenuSplitTyeEnum.LEFT ||
+          props.splitType === MenuSplitTyeEnum.NONE)
+      );
     });
 
     const getWrapperStyle = computed(

src/layouts/default/setting/SettingDrawer.tsx

@@ -10,7 +10,7 @@ import {
   InputNumberItem,
 } from './components';
 
-import { MenuTypeEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
 
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@@ -25,7 +25,7 @@ import {
   HandlerEnum,
   contentModeOptions,
   topMenuAlignOptions,
-  menuTriggerOptions,
+  getMenuTriggerOptions,
   routerTransitionOptions,
   menuTypeList,
 } from './enum';
@@ -134,6 +134,14 @@ export default defineComponent({
      * @description:
      */
     function renderFeatures() {
+      let triggerDef = unref(getTrigger);
+
+      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
+      const some = triggerOptions.some((item) => item.value === triggerDef);
+      if (!some) {
+        triggerDef = TriggerEnum.FOOTER;
+      }
+
       return (
         <>
           <SwitchItem
@@ -183,13 +191,15 @@ export default defineComponent({
             event={HandlerEnum.MENU_TOP_ALIGN}
             def={unref(getTopMenuAlign)}
             options={topMenuAlignOptions}
-            disabled={!unref(getShowHeader) || (!unref(getIsTopMenu) && !unref(getSplit))}
+            disabled={
+              !unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit))
+            }
           />
           <SelectItem
             title={t('layout.setting.menuCollapseButton')}
             event={HandlerEnum.MENU_TRIGGER}
-            def={unref(getTrigger)}
-            options={menuTriggerOptions}
+            def={triggerDef}
+            options={triggerOptions}
             disabled={!unref(getShowMenuRef)}
           />
           <SelectItem

src/layouts/default/setting/enum.ts

@@ -76,20 +76,26 @@ export const topMenuAlignOptions = [
   },
 ];
 
-export const menuTriggerOptions = [
-  {
-    value: TriggerEnum.NONE,
-    label: t('layout.setting.menuTriggerNone'),
-  },
-  {
-    value: TriggerEnum.FOOTER,
-    label: t('layout.setting.menuTriggerBottom'),
-  },
-  {
-    value: TriggerEnum.HEADER,
-    label: t('layout.setting.menuTriggerTop'),
-  },
-];
+export const getMenuTriggerOptions = (hideTop: boolean) => {
+  return [
+    {
+      value: TriggerEnum.NONE,
+      label: t('layout.setting.menuTriggerNone'),
+    },
+    {
+      value: TriggerEnum.FOOTER,
+      label: t('layout.setting.menuTriggerBottom'),
+    },
+    ...(hideTop
+      ? []
+      : [
+          {
+            value: TriggerEnum.HEADER,
+            label: t('layout.setting.menuTriggerTop'),
+          },
+        ]),
+  ];
+};
 
 export const routerTransitionOptions = [
   RouterTransitionEnum.ZOOM_FADE,

src/layouts/default/setting/handler.ts

@@ -25,6 +25,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
           type,
           collapsed: false,
           show: true,
+          hidden: false,
           ...splitOpt,
         },
       };