Skip to content

P
pro-layout
Commit cb61ef3c authored by Sendya's avatar Sendya
Browse files
Options

fix: sidemenu collapsed not work 

- fix: layout style
- fix: mix mode render headerTitle
parent 85db9e26
Show whitespace changes
Inline Side-by-side
Showing with 57 additions and 38 deletions
examples/index.tsx
View file @ cb61ef3c
...@@ -114,13 +114,13 @@ const routes = [ ...@@ -114,13 +114,13 @@ const routes = [
{ {
path: '/welcome', path: '/welcome',
name: 'welcome', name: 'welcome',
meta: { title: 'Welcome' }, meta: { title: 'Welcome', icon: 'SmileOutlined' },
component: Welcome, component: Welcome,
}, },
{ {
path: '/dashboard', path: '/dashboard',
name: 'dashboard', name: 'dashboard',
meta: { title: 'dashboard' }, meta: { title: 'dashboard', icon: 'SmileOutlined' },
redirect: '/dashboard/analysis', redirect: '/dashboard/analysis',
component: RouteView, component: RouteView,
children: [ children: [
......
package.json
View file @ cb61ef3c
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
"prepublishOnly": "npm run lint && npm run compile && npm run test" "prepublishOnly": "npm run lint && npm run compile && npm run test"
}, },
"peerDependencies": { "peerDependencies": {
"ant-design-vue": ">=2.0.0", "ant-design-vue": "^2.0.0",
"vue": ">=3.0.0" "vue": ">=3.0.0"
}, },
"devDependencies": { "devDependencies": {
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.11.2", "@babel/runtime": "^7.11.2",
"ant-design-vue": "^2.0.0-rc.8", "ant-design-vue": "^2.0.0",
"lodash-es": "^4.17.20", "lodash-es": "^4.17.20",
"vue-types": "^3.0.1" "vue-types": "^3.0.1"
}, },
......
src/BasicLayout.tsx
View file @ cb61ef3c
...@@ -55,6 +55,8 @@ export type BasicLayoutProps = SiderMenuWrapperProps & ...@@ -55,6 +55,8 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }) => { const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }) => {
const { const {
onCollapse: propsOnCollapse, onCollapse: propsOnCollapse,
onOpenKeys: propsOnOpenKeys,
onSelect: propsOnSelect,
contentStyle, contentStyle,
disableContentMargin, disableContentMargin,
isChildrenLayout: propsIsChildrenLayout, isChildrenLayout: propsIsChildrenLayout,
...@@ -70,15 +72,16 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots } ...@@ -70,15 +72,16 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
// const isMix = computed(() => layout === 'mix'); // const isMix = computed(() => layout === 'mix');
const handleCollapse = (collapsed: boolean) => { const handleCollapse = (collapsed: boolean) => {
console.log('handleCollapse', collapsed);
propsOnCollapse && propsOnCollapse(collapsed); propsOnCollapse && propsOnCollapse(collapsed);
emit('update:collapsed', collapsed); emit('update:collapsed', collapsed);
}; };
const handleOpenKeys = (openKeys: string[] | false): void => { const handleOpenKeys = (openKeys: string[] | false): void => {
propsOnOpenKeys && propsOnOpenKeys(openKeys);
emit('update:open-keys', openKeys); emit('update:open-keys', openKeys);
}; };
const handleSelect = (selectedKeys: string[] | false): void => { const handleSelect = (selectedKeys: string[] | false): void => {
selectedKeys && emit('update:selected-keys', selectedKeys); propsOnSelect && propsOnSelect(selectedKeys);
emit('update:selected-keys', selectedKeys);
}; };
const colSize = useMediaQuery(); const colSize = useMediaQuery();
const isMobile = computed(() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile); const isMobile = computed(() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile);
...@@ -87,15 +90,24 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots } ...@@ -87,15 +90,24 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
const className = computed(() => { const className = computed(() => {
return { return {
[baseClassName.value]: true, [baseClassName.value]: true,
[`screen-${props.colSize}`]: props.colSize, [`screen-${colSize.value}`]: colSize.value,
[`${baseClassName.value}-top-menu`]: props.layout === 'top', [`${baseClassName.value}-top-menu`]: props.layout === 'top',
[`${baseClassName.value}-is-children`]: props.isChildrenLayout, [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
[`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar, [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
[`${baseClassName.value}-${props.layout}`]: props.layout, [`${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<boolean>(defaultCollapsed || false, { // const [collapsed, onCollapse] = useMergedState<boolean>(defaultCollapsed || false, {
// value: props.collapsed, // value: props.collapsed,
// onChange: propsOnCollapse, // onChange: propsOnCollapse,
...@@ -158,7 +170,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots } ...@@ -158,7 +170,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
onOpenKeys={handleOpenKeys} onOpenKeys={handleOpenKeys}
/> />
)} )}
<Layout> <Layout style={genLayoutStyle}>
{headerDom} {headerDom}
<WrapContent <WrapContent
isChildrenLayout={propsIsChildrenLayout} isChildrenLayout={propsIsChildrenLayout}
...@@ -246,6 +258,9 @@ ProLayout.props = { ...@@ -246,6 +258,9 @@ ProLayout.props = {
// settings // settings
/* 侧边菜单宽度 */ /* 侧边菜单宽度 */
siderWidth: PropTypes.number.def(208), siderWidth: PropTypes.number.def(208),
/* 侧边栏收起宽度 */
collapsedWidth: PropTypes.number.def(48),
/* 是否分割菜单 (仅 mix 模式有效) */
splitMenus: PropTypes.bool, splitMenus: PropTypes.bool,
/* 控制菜单的收起和展开 */ /* 控制菜单的收起和展开 */
collapsed: PropTypes.bool, collapsed: PropTypes.bool,
......
src/SiderMenu/BaseMenu.tsx
View file @ cb61ef3c
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
isVNode, isVNode,
toRefs, toRefs,
toRaw, toRaw,
unref,
} from 'vue'; } from 'vue';
import { createFromIconfontCN } from '@ant-design/icons-vue'; import { createFromIconfontCN } from '@ant-design/icons-vue';
import 'ant-design-vue/es/menu/style'; import 'ant-design-vue/es/menu/style';
...@@ -180,7 +181,7 @@ export default defineComponent({ ...@@ -180,7 +181,7 @@ export default defineComponent({
const { mode, i18n } = toRefs(props); const { mode, i18n } = toRefs(props);
const isInline = computed(() => mode.value === 'inline'); const isInline = computed(() => mode.value === 'inline');
const openKeysProps = computed(() => 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 => { const handleOpenChange: OpenEventHandler = (openKeys: string[]): void => {
...@@ -202,7 +203,7 @@ export default defineComponent({ ...@@ -202,7 +203,7 @@ export default defineComponent({
inlineIndent={16} inlineIndent={16}
mode={props.mode} mode={props.mode}
theme={props.theme as 'dark' | 'light'} theme={props.theme as 'dark' | 'light'}
openKeys={openKeysProps.value} openKeys={props.openKeys === false ? [] : props.openKeys}
selectedKeys={props.selectedKeys || []} selectedKeys={props.selectedKeys || []}
onOpenChange={handleOpenChange} onOpenChange={handleOpenChange}
onSelect={handleSelect} onSelect={handleSelect}
......
src/SiderMenu/SiderMenu.tsx
View file @ cb61ef3c
...@@ -88,15 +88,16 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -88,15 +88,16 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
const { const {
collapsed, collapsed,
siderWidth, siderWidth,
onCollapse,
onOpenKeys,
onSelect,
breakpoint, breakpoint,
collapsedWidth = 48, collapsedWidth = 48,
menuExtraRender = false, menuExtraRender = false,
menuContentRender = false, menuContentRender = false,
menuFooterRender = false, menuFooterRender = false,
collapsedButtonRender = defaultRenderCollapsedButton, collapsedButtonRender = defaultRenderCollapsedButton,
onCollapse,
onOpenKeys,
onSelect,
} = props; } = props;
const { getPrefixCls } = useProProvider(); const { getPrefixCls } = useProProvider();
const context = useRouteContext(); const context = useRouteContext();
...@@ -108,9 +109,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -108,9 +109,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
const runtimeSideWidth = computed(() => const runtimeSideWidth = computed(() =>
props.collapsed ? props.collapsedWidth : props.siderWidth, props.collapsed ? props.collapsedWidth : props.siderWidth,
); );
console.log('runtimeSideWidth', runtimeSideWidth);
const classNames = computed(() => { const classNames = computed(() => {
return { return {
[baseClassName]: true, [baseClassName]: true,
...@@ -119,7 +117,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -119,7 +117,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
[`${baseClassName}-fixed`]: context.fixSiderbar, [`${baseClassName}-fixed`]: context.fixSiderbar,
}; };
}); });
const hasSide = computed(() => props.layout === 'mix' && context.splitMenus); const hasSide = computed(() => props.layout === 'mix' && props.splitMenus);
const flatMenuData = computed(() => { const flatMenuData = computed(() => {
return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]); return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]);
}); });
......
src/SiderMenu/index.tsx
View file @ cb61ef3c
...@@ -32,7 +32,7 @@ const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => { ...@@ -32,7 +32,7 @@ const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
); );
}; };
SiderMenuWrapper.inheritAttrs = false; SiderMenuWrapper.inheritAttrs = true;
SiderMenuWrapper.displayName = 'SiderMenuWrapper'; SiderMenuWrapper.displayName = 'SiderMenuWrapper';
export default SiderMenuWrapper; export default SiderMenuWrapper;
src/TopNavHeader/index.tsx
View file @ cb61ef3c
...@@ -63,7 +63,9 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => { ...@@ -63,7 +63,9 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
const prefixCls = `${propPrefixCls || 'ant-pro'}-top-nav-header`; const prefixCls = `${propPrefixCls || 'ant-pro'}-top-nav-header`;
const headerDom = defaultRenderLogoAndTitle( const headerDom = defaultRenderLogoAndTitle(
{ ...props, collapsed: false }, { ...props, collapsed: false },
layout === 'mix' ? 'headerTitleRender' : undefined, // REMARK:: Any time render header title
// layout === 'mix' ? 'headerTitleRender' : undefined,
layout !== 'side' ? 'headerTitleRender' : undefined,
); );
const className = computed(() => { const className = computed(() => {
return { return {
...@@ -71,7 +73,6 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => { ...@@ -71,7 +73,6 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
light: props.theme === 'light', light: props.theme === 'light',
}; };
}); });
console.log('onOpenKeys', onOpenKeys);
return ( return (
<div class={className.value}> <div class={className.value}>
<div ref={headerRef} class={`${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}> <div ref={headerRef} class={`${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
......
yarn.lock
View file @ cb61ef3c
...@@ -145,14 +145,13 @@ ...@@ -145,14 +145,13 @@
resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c" resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ== integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
"@ant-design/icons-vue@^5.1.9": "@ant-design/icons-vue@^6.0.0":
version "5.1.9" version "6.0.1"
resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-5.1.9.tgz#8d741a3290be61af7c71618c308cc1a946c4e434" 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-jXQaMpC+Ya98cWGMMIzBqUbE5DQ= integrity sha1-nYBMPHTSz6+XyxjlgtO5QAk09f0=
dependencies: dependencies:
"@ant-design/colors" "^5.0.0" "@ant-design/colors" "^5.0.0"
"@ant-design/icons-svg" "^4.0.0" "@ant-design/icons-svg" "^4.0.0"
"@babel/runtime" "^7.10.4"
"@types/lodash" "^4.14.165" "@types/lodash" "^4.14.165"
lodash "^4.17.15" lodash "^4.17.15"
...@@ -1341,7 +1340,7 @@ ...@@ -1341,7 +1340,7 @@
core-js-pure "^3.0.0" core-js-pure "^3.0.0"
regenerator-runtime "^0.13.4" 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" version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg== integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
...@@ -1757,12 +1756,12 @@ ...@@ -1757,12 +1756,12 @@
resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
"@simonwep/pickr@~1.7.0": "@simonwep/pickr@~1.8.0":
version "1.7.4" version "1.8.0"
resolved "https://registry.yarnpkg.com/@simonwep/pickr/-/pickr-1.7.4.tgz#b14fcd945890388b870cd6db4d6c78d531f25141" resolved "https://registry.npm.taobao.org/@simonwep/pickr/download/@simonwep/pickr-1.8.0.tgz#adbff9a4f7f0e59dec9946508c5e481b7abae0f8"
integrity sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g== integrity sha1-rb/5pPfw5Z3smUZQjF5IG3q64Pg=
dependencies: dependencies:
core-js "^3.6.5" core-js "^3.8.0"
nanopop "^2.1.0" nanopop "^2.1.0"
"@sinonjs/commons@^1.7.0": "@sinonjs/commons@^1.7.0":
...@@ -3042,15 +3041,15 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.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" resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768= integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
ant-design-vue@^2.0.0-rc.8: ant-design-vue@^2.0.0:
version "2.0.0-rc.8" version "2.0.0"
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" 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-DyGa7bJ/F5ciiqt5+72DKKc4mp8= integrity sha1-0w7AaTjcO0OwihF4GPq5HXsIPl8=
dependencies: dependencies:
"@ant-design-vue/use" "^0.0.1-0" "@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" "@babel/runtime" "^7.10.5"
"@simonwep/pickr" "~1.7.0" "@simonwep/pickr" "~1.8.0"
array-tree-filter "^2.1.0" array-tree-filter "^2.1.0"
async-validator "^3.3.0" async-validator "^3.3.0"
dom-align "^1.10.4" dom-align "^1.10.4"
...@@ -5101,6 +5100,11 @@ core-js@^3.6.5: ...@@ -5101,6 +5100,11 @@ core-js@^3.6.5:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47"
integrity sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg== 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: core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment