fix(menu): fix scrillbar not work

vben
1 parent 689425e4
Showing 10 changed files with 202 additions and 155 deletions
CHANGELOG.zh_CN.md
src/components/Menu/src/BasicMenu.vue
src/layouts/default/header/index.vue
src/layouts/default/menu/index.tsx
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/enum.ts
src/layouts/default/setting/handler.ts
src/layouts/default/sider/LayoutSider.tsx → src/layouts/default/sider/LayoutSider.vue
src/layouts/default/sider/index.vue
src/layouts/default/sider/useLayoutSider.tsx → src/layouts/default/sider/useLayoutSider.ts
+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复混合模式下滚动条丢失问题
+
 ## 2.0.0-rc.14 (2020-12-15)
  
 ### ✨ Features
@@ -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,
@@ -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,
       };
     },
   });
@@ -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(
@@ -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
@@ -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,
@@ -25,6 +25,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial&lt;ProjectConf
           type,
           collapsed: false,
           show: true,
+          hidden: false,
           ...splitOpt,
         },
       };
-import './index.less';
-
-import { computed, defineComponent, ref, unref, CSSProperties } from 'vue';
-
-import { Layout } from 'ant-design-vue';
-import LayoutMenu from '../menu';
-
-import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
-import { useAppInject } from '/@/hooks/web/useAppInject';
-import { useDesign } from '/@/hooks/web/useDesign';
-
-import DragBar from './DragBar.vue';
-export default defineComponent({
-  name: 'LayoutSideBar',
-  setup() {
-    const dragBarRef = ref<ElRef>(null);
-    const sideRef = ref<ElRef>(null);
-
-    const {
-      getCollapsed,
-      getMenuWidth,
-      getSplit,
-      getMenuTheme,
-      getRealWidth,
-      getMenuHidden,
-      getMenuFixed,
-      getIsMixMode,
-    } = useMenuSetting();
-
-    const { prefixCls } = useDesign('layout-sideBar');
-
-    const { getIsMobile } = useAppInject();
-
-    const { getTriggerAttr, getTriggerSlot } = useTrigger(getIsMobile);
-
-    useDragLine(sideRef, dragBarRef);
-
-    const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
-
-    const getMode = computed(() => {
-      return unref(getSplit) ? MenuModeEnum.INLINE : null;
-    });
-
-    const getSplitType = computed(() => {
-      return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
-    });
-
-    const showClassSideBarRef = computed(() => {
-      return unref(getSplit) ? !unref(getMenuHidden) : true;
-    });
+<template>
+  <div
+    v-if="getMenuFixed && !getIsMobile"
+    :style="getHiddenDomStyle"
+    :class="{ hidden: !showClassSideBarRef }"
+  />
+  <Sider
+    ref="sideRef"
+    breakpoint="lg"
+    collapsible
+    :class="getSiderClass"
+    :width="getMenuWidth"
+    :collapsed="getIsMobile ? false : getCollapsed"
+    :collapsedWidth="getCollapsedWidth"
+    :theme="getMenuTheme"
+    @collapse="onCollapseChange"
+    @breakpoint="onBreakpointChange"
+    v-bind="getTriggerAttr"
+  >
+    <template #trigger v-if="getShowTrigger">
+      <LayoutTrigger />
+    </template>
+    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
+    <DragBar ref="dragBarRef" />
+  </Sider>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, CSSProperties } from 'vue';
+
+  import { Layout } from 'ant-design-vue';
+  import LayoutMenu from '../menu';
+  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import DragBar from './DragBar.vue';
+  export default defineComponent({
+    name: 'LayoutSideBar',
+    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
+    setup() {
+      const dragBarRef = ref<ElRef>(null);
+      const sideRef = ref<ElRef>(null);
+
+      const {
+        getCollapsed,
+        getMenuWidth,
+        getSplit,
+        getMenuTheme,
+        getRealWidth,
+        getMenuHidden,
+        getMenuFixed,
+        getIsMixMode,
+      } = useMenuSetting();
+
+      const { prefixCls } = useDesign('layout-sideBar');
+
+      const { getIsMobile } = useAppInject();
+
+      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
+
+      useDragLine(sideRef, dragBarRef);
+
+      const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
+
+      const getMode = computed(() => {
+        return unref(getSplit) ? MenuModeEnum.INLINE : null;
+      });
+
+      const getSplitType = computed(() => {
+        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+      });
+
+      const showClassSideBarRef = computed(() => {
+        return unref(getSplit) ? !unref(getMenuHidden) : true;
+      });
+
+      const getSiderClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--fixed`]: unref(getMenuFixed),
+            hidden: !unref(showClassSideBarRef),
+            [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+          },
+        ];
+      });
+
+      const getHiddenDomStyle = computed(
+        (): CSSProperties => {
+          const width = `${unref(getRealWidth)}px`;
+          return {
+            width: width,
+            overflow: 'hidden',
+            flex: `0 0 ${width}`,
+            maxWidth: width,
+            minWidth: width,
+            transition: 'all 0.2s',
+          };
+        }
+      );
  
-    const getSiderClass = computed(() => {
-      return [
+      return {
         prefixCls,
-        {
-          [`${prefixCls}--fixed`]: unref(getMenuFixed),
-          hidden: !unref(showClassSideBarRef),
-          [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
-        },
-      ];
-    });
-
-    const getHiddenDomStyle = computed(
-      (): CSSProperties => {
-        const width = `${unref(getRealWidth)}px`;
-        return {
-          width: width,
-          overflow: 'hidden',
-          flex: `0 0 ${width}`,
-          maxWidth: width,
-          minWidth: width,
-          transition: 'all 0.2s',
-        };
-      }
-    );
-
-    function renderDefault() {
-      return (
-        <>
-          <LayoutMenu
-            theme={unref(getMenuTheme)}
-            menuMode={unref(getMode)}
-            splitType={unref(getSplitType)}
-          />
-          <DragBar ref={dragBarRef} />
-        </>
-      );
-    }
-
-    return () => {
-      return (
-        <>
-          {unref(getMenuFixed) && !unref(getIsMobile) && (
-            <div style={unref(getHiddenDomStyle)} class={{ hidden: !unref(showClassSideBarRef) }} />
-          )}
-          <Layout.Sider
-            ref={sideRef}
-            breakpoint="lg"
-            collapsible
-            class={unref(getSiderClass)}
-            width={unref(getMenuWidth)}
-            collapsed={unref(getIsMobile) ? false : unref(getCollapsed)}
-            collapsedWidth={unref(getCollapsedWidth)}
-            theme={unref(getMenuTheme)}
-            onCollapse={onCollapseChange}
-            onBreakpoint={onBreakpointChange}
-            {...unref(getTriggerAttr)}
-          >
-            {{
-              ...unref(getTriggerSlot),
-              default: () => renderDefault(),
-            }}
-          </Layout.Sider>
-        </>
-      );
-    };
-  },
-});
+        sideRef,
+        dragBarRef,
+        getIsMobile,
+        getHiddenDomStyle,
+        getSiderClass,
+        getTriggerAttr,
+        getCollapsedWidth,
+        getMenuFixed,
+        showClassSideBarRef,
+        getMenuWidth,
+        getCollapsed,
+        getMenuTheme,
+        onBreakpointChange,
+        getMode,
+        getSplitType,
+        onCollapseChange,
+        getShowTrigger,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+</style>
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
  
-  import Sider from './LayoutSider';
+  import Sider from './LayoutSider.vue';
   import { Drawer } from 'ant-design-vue';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import type { Ref } from 'vue';
  
 import { computed, unref, onMounted, nextTick, ref } from 'vue';
-import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
  
 import { TriggerEnum } from '/@/enums/menuEnum';
  
@@ -45,7 +44,7 @@ export function useSiderEvent() {
 export function useTrigger(getIsMobile: Ref<boolean>) {
   const { getTrigger, getSplit } = useMenuSetting();
  
-  const showTrigger = computed(() => {
+  const getShowTrigger = computed(() => {
     const trigger = unref(getTrigger);
  
     return (
@@ -56,7 +55,7 @@ export function useTrigger(getIsMobile: Ref&lt;boolean&gt;) {
   });
  
   const getTriggerAttr = computed(() => {
-    if (unref(showTrigger)) {
+    if (unref(getShowTrigger)) {
       return {};
     }
     return {
@@ -64,16 +63,7 @@ export function useTrigger(getIsMobile: Ref&lt;boolean&gt;) {
     };
   });
  
-  const getTriggerSlot = computed(() => {
-    if (unref(showTrigger)) {
-      return {
-        trigger: () => <LayoutTrigger />,
-      };
-    }
-    return {};
-  });
-
-  return { getTriggerAttr, getTriggerSlot };
+  return { getTriggerAttr, getShowTrigger };
 }
  
 /**