fix: mobile mode bug

vueComponent · Jul 13, 2021 · 7424906 · 7424906
1 parent 643279d
commit 7424906
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.1.0-alpha.2",
+  "version": "3.1.0-alpha.3",
   "license": "MIT",
   "files": [
     "dist",
@@ -37,6 +37,7 @@
   "dependencies": {
     "ant-design-vue": "^2.2.2",
     "lodash-es": "^4.17.21",
+    "omit.js": "^2.0.2",
     "vue": "^3.1.0",
     "vue-router": "^4.0.10"
   },

diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx
@@ -4,9 +4,9 @@ import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import omit from 'omit.js';
+import { withInstall } from 'ant-design-vue/es/_util/type';
 import useMediaQuery from './hooks/useMediaQuery';
 
-import { withInstall } from 'ant-design-vue/es/_util/type';
 import { defaultSettingProps } from './defaultSettings';
 import { getPrefixCls, defaultRouteContext } from './RouteContext';
 import type { BreadcrumbProps } from './RouteContext';
@@ -75,6 +75,7 @@ export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>
 
 const ProLayout = defineComponent({
   name: 'ProLayout',
+  props: basicLayoutProps,
   // inheritAttrs: false,
   emits: [
     'update:collapsed',
@@ -86,7 +87,6 @@ const ProLayout = defineComponent({
     'menuHeaderClick',
     'menuClick',
   ],
-  props: basicLayoutProps,
   setup(props, { emit, slots }) {
     const refProps = toRefs(props);
     const isTop = computed(() => props.layout === 'top');
@@ -165,7 +165,7 @@ const ProLayout = defineComponent({
     const menuHeaderRender = getPropsSlot(slots, props, 'menuHeaderRender');
     const footerRender = getPropsSlot(slots, props, 'footerRender');
     // const menuRender = getPropsSlot(slots, props, 'menuRender');
-    const breadcrumbRender = props['breadcrumbRender'] || slots['breadcrumbRender'];
+    const breadcrumbRender = props.breadcrumbRender || slots.breadcrumbRender;
     const headerDom = computed(() =>
       headerRender(
         {
@@ -199,6 +199,7 @@ const ProLayout = defineComponent({
       contentWidth: refProps.contentWidth, // 'Fluid',
       layout: refProps.layout,
       navTheme: refProps.navTheme,
+      isMobile: unref(isMobile),
       splitMenus: refProps.splitMenus,
       fixedHeader: refProps.fixSiderbar,
       fixSiderbar: refProps.fixSiderbar,

diff --git a/src/FooterToolbar/index.tsx b/src/FooterToolbar/index.tsx
@@ -4,6 +4,7 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, PropType } from
 import { RouteContextProps, useRouteContext } from '../RouteContext';
 import { getMenuFirstChildren } from '../utils';
 import type { CustomRender } from '../typings';
+
 export interface FooterToolbarProps {
   extra?: CustomRender | JSX.Element;
   renderContent?: (
@@ -54,6 +55,9 @@ const FooterToolbar = defineComponent({
     });
     const width = computed(() => {
       const { isMobile, sideWidth, layout } = routeContext;
+      if (isMobile) {
+        return '100%';
+      }
       if (!sideWidth || layout === 'top') {
         return '100%';
       }

diff --git a/src/GlobalHeader/index.tsx b/src/GlobalHeader/index.tsx
@@ -30,7 +30,7 @@ const renderLogo = (
   return logoDom;
 };
 
-export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots }) => {
+const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots }) => {
   const {
     isMobile,
     logo,
@@ -108,4 +108,7 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { sl
     </div>
   );
 };
-GlobalHeader.emits = ['menuHeaderClick', 'collapse', 'openKeys', 'select'];
+// GlobalHeader.emits = ['menuHeaderClick', 'collapse', 'openKeys', 'select'];
+GlobalHeader.inheritAttrs = false;
+
+export { GlobalHeader };
diff --git a/src/Header.tsx b/src/Header.tsx
@@ -4,13 +4,15 @@ import type { RouteRecordRaw } from 'vue-router';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 
+import omit from 'omit.js';
 import { GlobalHeader } from './GlobalHeader';
 import type { GlobalHeaderProps } from './GlobalHeader';
 import globalHeaderProps from './GlobalHeader/headerProps';
 import { TopNavHeader } from './TopNavHeader';
 import { useRouteContext } from './RouteContext';
 import type { CustomRender, WithFalse } from './typings';
 import { clearMenuItem, PropTypes } from './utils';
+
 import './Header.less';
 
 const { Header } = Layout;
@@ -40,8 +42,8 @@ export const headerViewProps = {
 export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps> & GlobalHeaderProps>;
 
 export const HeaderView = defineComponent({
-  inheritAttrs: false,
   name: 'HeaderView',
+  inheritAttrs: false,
   props: headerViewProps,
   setup(props) {
     const {
@@ -73,9 +75,14 @@ export const HeaderView = defineComponent({
         [`${prefixCls.value}-top-menu`]: isTop.value,
       };
     });
-    const renderContent = () => {
+    const restProps = computed(() => omit(props, ['onCollapse']));
+    const renderContent = computed(() => {
       let defaultDom = (
-        <GlobalHeader {...props} onCollapse={onCollapse.value} menuData={clearMenuData.value}>
+        <GlobalHeader
+          {...restProps.value}
+          onCollapse={onCollapse.value}
+          menuData={clearMenuData.value}
+        >
           {props.headerContentRender && props.headerContentRender(props)}
         </GlobalHeader>
       );
@@ -94,7 +101,7 @@ export const HeaderView = defineComponent({
         return props.headerRender(props, defaultDom);
       }
       return defaultDom;
-    };
+    });
 
     /**
      * 计算侧边栏的宽度，不然导致左边的样式会出问题
@@ -128,7 +135,7 @@ export const HeaderView = defineComponent({
             }}
             class={className.value}
           >
-            {renderContent()}
+            {renderContent.value}
           </Header>
         </>
       );

diff --git a/src/SiderMenu/SiderMenu.tsx b/src/SiderMenu/SiderMenu.tsx
@@ -9,11 +9,11 @@ import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
 import { WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';
 import { defaultSettingProps } from '../defaultSettings';
-import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useRouteContext } from '../RouteContext';
 import { PropTypes, getMenuFirstChildren } from '../utils';
 import './index.less';
@@ -124,7 +124,8 @@ export const defaultRenderLogoAndTitle = (
   if (typeof renderFunction === 'function') {
     // when collapsed, no render title
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
-  } else if (Array.isArray(renderFunction)) {
+  }
+  if (Array.isArray(renderFunction)) {
     return <>{renderFunction}</>;
   }
   if (layout === 'mix' && renderKey === 'menuHeaderRender') {

diff --git a/src/TopNavHeader/index.tsx b/src/TopNavHeader/index.tsx
@@ -1,16 +1,15 @@
 import { ref, computed } from 'vue';
 import type { FunctionalComponent, ExtractPropTypes } from 'vue';
+import ResizeObserver from 'ant-design-vue/es/vc-resize-observer';
 import globalHeaderProps from '../GlobalHeader/headerProps';
 import { siderMenuProps, defaultRenderLogoAndTitle } from '../SiderMenu/SiderMenu';
 import type { SiderMenuProps } from '../SiderMenu/SiderMenu';
 import BaseMenu from '../SiderMenu/BaseMenu';
 
-import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
-import type { FormatMessage } from '../typings';
 import { useRouteContext } from '../RouteContext';
 import './index.less';
 
-export const topNavHeaderProps = Object.assign({}, siderMenuProps, globalHeaderProps);
+export const topNavHeaderProps = { ...siderMenuProps, ...globalHeaderProps };
 
 export type TopNavHeaderProps = Partial<ExtractPropTypes<typeof topNavHeaderProps>> &
   Partial<SiderMenuProps>;

diff --git a/yarn.lock b/yarn.lock
@@ -2386,6 +2386,11 @@ omit.js@^2.0.0:
   resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
   integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==
 
+omit.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
+  integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"