From cb61ef3c6ec57fcf692e8002e54487f51bfa9d0f Mon Sep 17 00:00:00 2001 From: Sendya <18x@loacg.com> Date: Tue, 9 Feb 2021 11:59:35 +0800 Subject: [PATCH] fix: sidemenu collapsed not work - fix: layout style - fix: mix mode render headerTitle --- examples/index.tsx | 4 ++-- package.json | 4 ++-- src/BasicLayout.tsx | 25 +++++++++++++++++++----- src/SiderMenu/BaseMenu.tsx | 5 +++-- src/SiderMenu/SiderMenu.tsx | 12 +++++------- src/SiderMenu/index.tsx | 2 +- src/TopNavHeader/index.tsx | 5 +++-- yarn.lock | 38 ++++++++++++++++++++----------------- 8 files changed, 57 insertions(+), 38 deletions(-) diff --git a/examples/index.tsx b/examples/index.tsx index f000da71..b514444d 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -114,13 +114,13 @@ const routes = [ { path: '/welcome', name: 'welcome', - meta: { title: 'Welcome' }, + meta: { title: 'Welcome', icon: 'SmileOutlined' }, component: Welcome, }, { path: '/dashboard', name: 'dashboard', - meta: { title: 'dashboard' }, + meta: { title: 'dashboard', icon: 'SmileOutlined' }, redirect: '/dashboard/analysis', component: RouteView, children: [ diff --git a/package.json b/package.json index bdd4b2cc..75fb66f7 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "prepublishOnly": "npm run lint && npm run compile && npm run test" }, "peerDependencies": { - "ant-design-vue": ">=2.0.0", + "ant-design-vue": "^2.0.0", "vue": ">=3.0.0" }, "devDependencies": { @@ -72,7 +72,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "ant-design-vue": "^2.0.0-rc.8", + "ant-design-vue": "^2.0.0", "lodash-es": "^4.17.20", "vue-types": "^3.0.1" }, diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx index 1eae50be..444cb303 100644 --- a/src/BasicLayout.tsx +++ b/src/BasicLayout.tsx @@ -55,6 +55,8 @@ export type BasicLayoutProps = SiderMenuWrapperProps & const ProLayout: FunctionalComponent = (props, { emit, slots }) => { const { onCollapse: propsOnCollapse, + onOpenKeys: propsOnOpenKeys, + onSelect: propsOnSelect, contentStyle, disableContentMargin, isChildrenLayout: propsIsChildrenLayout, @@ -70,15 +72,16 @@ const ProLayout: FunctionalComponent = (props, { emit, slots } // const isMix = computed(() => layout === 'mix'); const handleCollapse = (collapsed: boolean) => { - console.log('handleCollapse', collapsed); propsOnCollapse && propsOnCollapse(collapsed); emit('update:collapsed', collapsed); }; const handleOpenKeys = (openKeys: string[] | false): void => { + propsOnOpenKeys && propsOnOpenKeys(openKeys); emit('update:open-keys', openKeys); }; const handleSelect = (selectedKeys: string[] | false): void => { - selectedKeys && emit('update:selected-keys', selectedKeys); + propsOnSelect && propsOnSelect(selectedKeys); + emit('update:selected-keys', selectedKeys); }; const colSize = useMediaQuery(); const isMobile = computed(() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile); @@ -87,15 +90,24 @@ const ProLayout: FunctionalComponent = (props, { emit, slots } const className = computed(() => { return { [baseClassName.value]: true, - [`screen-${props.colSize}`]: props.colSize, + [`screen-${colSize.value}`]: colSize.value, [`${baseClassName.value}-top-menu`]: props.layout === 'top', [`${baseClassName.value}-is-children`]: props.isChildrenLayout, [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar, [`${baseClassName.value}-${props.layout}`]: props.layout, - [colSize.value]: colSize.value, }; }); + // siderMenuDom 为空的时候，不需要 padding + const genLayoutStyle: CSSProperties = { + position: 'relative', + }; + + // if is some layout children, don't need min height + if (propsIsChildrenLayout || (contentStyle && contentStyle.minHeight)) { + genLayoutStyle.minHeight = 0; + } + // const [collapsed, onCollapse] = useMergedState(defaultCollapsed || false, { // value: props.collapsed, // onChange: propsOnCollapse, @@ -158,7 +170,7 @@ const ProLayout: FunctionalComponent = (props, { emit, slots } onOpenKeys={handleOpenKeys} /> )} - + {headerDom} mode.value === 'inline'); const openKeysProps = computed(() => - getOpenKeysProps(toRaw(props.openKeys), { layout: props.layout, collapsed: props.collapsed }), + getOpenKeysProps(props.openKeys, { layout: props.layout, collapsed: props.collapsed }), ); const handleOpenChange: OpenEventHandler = (openKeys: string[]): void => { @@ -202,7 +203,7 @@ export default defineComponent({ inlineIndent={16} mode={props.mode} theme={props.theme as 'dark' | 'light'} - openKeys={openKeysProps.value} + openKeys={props.openKeys === false ? [] : props.openKeys} selectedKeys={props.selectedKeys || []} onOpenChange={handleOpenChange} onSelect={handleSelect} diff --git a/src/SiderMenu/SiderMenu.tsx b/src/SiderMenu/SiderMenu.tsx index d6a89004..4d2f3e80 100644 --- a/src/SiderMenu/SiderMenu.tsx +++ b/src/SiderMenu/SiderMenu.tsx @@ -88,15 +88,16 @@ const SiderMenu: FunctionalComponent = (props: SiderMenuProps) = const { collapsed, siderWidth, - onCollapse, - onOpenKeys, - onSelect, breakpoint, collapsedWidth = 48, menuExtraRender = false, menuContentRender = false, menuFooterRender = false, collapsedButtonRender = defaultRenderCollapsedButton, + + onCollapse, + onOpenKeys, + onSelect, } = props; const { getPrefixCls } = useProProvider(); const context = useRouteContext(); @@ -108,9 +109,6 @@ const SiderMenu: FunctionalComponent = (props: SiderMenuProps) = const runtimeSideWidth = computed(() => props.collapsed ? props.collapsedWidth : props.siderWidth, ); - - console.log('runtimeSideWidth', runtimeSideWidth); - const classNames = computed(() => { return { [baseClassName]: true, @@ -119,7 +117,7 @@ const SiderMenu: FunctionalComponent = (props: SiderMenuProps) = [`${baseClassName}-fixed`]: context.fixSiderbar, }; }); - const hasSide = computed(() => props.layout === 'mix' && context.splitMenus); + const hasSide = computed(() => props.layout === 'mix' && props.splitMenus); const flatMenuData = computed(() => { return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]); }); diff --git a/src/SiderMenu/index.tsx b/src/SiderMenu/index.tsx index 93a3d2a2..b47ae53b 100644 --- a/src/SiderMenu/index.tsx +++ b/src/SiderMenu/index.tsx @@ -32,7 +32,7 @@ const SiderMenuWrapper: FunctionalComponent = props => { ); }; -SiderMenuWrapper.inheritAttrs = false; +SiderMenuWrapper.inheritAttrs = true; SiderMenuWrapper.displayName = 'SiderMenuWrapper'; export default SiderMenuWrapper; diff --git a/src/TopNavHeader/index.tsx b/src/TopNavHeader/index.tsx index aff10de1..2b38dfe9 100644 --- a/src/TopNavHeader/index.tsx +++ b/src/TopNavHeader/index.tsx @@ -63,7 +63,9 @@ export const TopNavHeader: FunctionalComponent = props => { const prefixCls = `${propPrefixCls || 'ant-pro'}-top-nav-header`; const headerDom = defaultRenderLogoAndTitle( { ...props, collapsed: false }, - layout === 'mix' ? 'headerTitleRender' : undefined, + // REMARK:: Any time render header title + // layout === 'mix' ? 'headerTitleRender' : undefined, + layout !== 'side' ? 'headerTitleRender' : undefined, ); const className = computed(() => { return { @@ -71,7 +73,6 @@ export const TopNavHeader: FunctionalComponent = props => { light: props.theme === 'light', }; }); - console.log('onOpenKeys', onOpenKeys); return (
diff --git a/yarn.lock b/yarn.lock index 77ed4f88..82752865 100644 --- a/yarn.lock +++ b/yarn.lock @@ -145,14 +145,13 @@ resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c" integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ== -"@ant-design/icons-vue@^5.1.9": - version "5.1.9" - resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-5.1.9.tgz#8d741a3290be61af7c71618c308cc1a946c4e434" - integrity sha1-jXQaMpC+Ya98cWGMMIzBqUbE5DQ= +"@ant-design/icons-vue@^6.0.0": + version "6.0.1" + resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-6.0.1.tgz?cache=0&sync_timestamp=1611990511152&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design%2Ficons-vue%2Fdownload%2F%40ant-design%2Ficons-vue-6.0.1.tgz#9d804c3c74d2cfaf97cb18e582d3b9400934f5fd" + integrity sha1-nYBMPHTSz6+XyxjlgtO5QAk09f0= dependencies: "@ant-design/colors" "^5.0.0" "@ant-design/icons-svg" "^4.0.0" - "@babel/runtime" "^7.10.4" "@types/lodash" "^4.14.165" lodash "^4.17.15" @@ -1341,7 +1340,7 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg== @@ -1757,12 +1756,12 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== -"@simonwep/pickr@~1.7.0": - version "1.7.4" - resolved "https://registry.yarnpkg.com/@simonwep/pickr/-/pickr-1.7.4.tgz#b14fcd945890388b870cd6db4d6c78d531f25141" - integrity sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g== +"@simonwep/pickr@~1.8.0": + version "1.8.0" + resolved "https://registry.npm.taobao.org/@simonwep/pickr/download/@simonwep/pickr-1.8.0.tgz#adbff9a4f7f0e59dec9946508c5e481b7abae0f8" + integrity sha1-rb/5pPfw5Z3smUZQjF5IG3q64Pg= dependencies: - core-js "^3.6.5" + core-js "^3.8.0" nanopop "^2.1.0" "@sinonjs/commons@^1.7.0": @@ -3042,15 +3041,15 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.0: resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf" integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768= -ant-design-vue@^2.0.0-rc.8: - version "2.0.0-rc.8" - resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-2.0.0-rc.8.tgz?cache=0&sync_timestamp=1610025633191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fant-design-vue%2Fdownload%2Fant-design-vue-2.0.0-rc.8.tgz#0f219aedb27f1797228aab79fbbd8328a7389a9f" - integrity sha1-DyGa7bJ/F5ciiqt5+72DKKc4mp8= +ant-design-vue@^2.0.0: + version "2.0.0" + resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-2.0.0.tgz?cache=0&sync_timestamp=1612620390789&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fant-design-vue%2Fdownload%2Fant-design-vue-2.0.0.tgz#d30ec06938dc3b43b08a117818fab91d7b083e5f" + integrity sha1-0w7AaTjcO0OwihF4GPq5HXsIPl8= dependencies: "@ant-design-vue/use" "^0.0.1-0" - "@ant-design/icons-vue" "^5.1.9" + "@ant-design/icons-vue" "^6.0.0" "@babel/runtime" "^7.10.5" - "@simonwep/pickr" "~1.7.0" + "@simonwep/pickr" "~1.8.0" array-tree-filter "^2.1.0" async-validator "^3.3.0" dom-align "^1.10.4" @@ -5101,6 +5100,11 @@ core-js@^3.6.5: resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47" integrity sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg== +core-js@^3.8.0: + version "3.8.3" + resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.8.3.tgz?cache=0&sync_timestamp=1611038902573&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0" + integrity sha1-whkG4fFPNon5OrzG4miDVQ3ZLdA= + core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"