From 7424906ea242552b64608a869612a47efa59b07a Mon Sep 17 00:00:00 2001 From: Sendya <18x@loacg.com> Date: Tue, 13 Jul 2021 22:19:00 +0800 Subject: [PATCH] fix: mobile mode bug --- package.json | 3 ++- src/BasicLayout.tsx | 7 ++++--- src/FooterToolbar/index.tsx | 4 ++++ src/GlobalHeader/index.tsx | 7 +++++-- src/Header.tsx | 17 ++++++++++++----- src/SiderMenu/SiderMenu.tsx | 5 +++-- src/TopNavHeader/index.tsx | 5 ++--- yarn.lock | 5 +++++ 8 files changed, 37 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 0de34f90..71ccec63 100644 --- 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 index f9ca15b6..d3618f41 100644 --- 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 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 index 676569cf..a17b81ab 100644 --- 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 index 008fbd5d..f5be3f2d 100644 --- a/src/GlobalHeader/index.tsx +++ b/src/GlobalHeader/index.tsx @@ -30,7 +30,7 @@ const renderLogo = ( return logoDom; }; -export const GlobalHeader: FunctionalComponent = (props, { slots }) => { +const GlobalHeader: FunctionalComponent = (props, { slots }) => { const { isMobile, logo, @@ -108,4 +108,7 @@ export const GlobalHeader: FunctionalComponent = (props, { sl ); }; -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 index 1dc69b31..5d12f06a 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -4,6 +4,7 @@ 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'; @@ -11,6 +12,7 @@ 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 & 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 = ( - + {props.headerContentRender && props.headerContentRender(props)} ); @@ -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} ); diff --git a/src/SiderMenu/SiderMenu.tsx b/src/SiderMenu/SiderMenu.tsx index 8a517ace..8845608a 100644 --- 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 index fad0c3e2..9940e2a0 100644 --- 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> & Partial; diff --git a/yarn.lock b/yarn.lock index 47ca4da8..5c091e8f 100644 --- 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"