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
Hide 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 = [
{
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: [
......
package.json
View file @ cb61ef3c
......@@ -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"
},
......
src/BasicLayout.tsx
View file @ cb61ef3c
......@@ -55,6 +55,8 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }) => {
const {
onCollapse: propsOnCollapse,
onOpenKeys: propsOnOpenKeys,
onSelect: propsOnSelect,
contentStyle,
disableContentMargin,
isChildrenLayout: propsIsChildrenLayout,
......@@ -70,15 +72,16 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (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<BasicLayoutProps> = (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<boolean>(defaultCollapsed || false, {
// value: props.collapsed,
// onChange: propsOnCollapse,
......@@ -158,7 +170,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
onOpenKeys={handleOpenKeys}
/>
)}
<Layout>
<Layout style={genLayoutStyle}>
{headerDom}
<WrapContent
isChildrenLayout={propsIsChildrenLayout}
......@@ -246,6 +258,9 @@ ProLayout.props = {
// settings
/* 侧边菜单宽度 */
siderWidth: PropTypes.number.def(208),
/* 侧边栏收起宽度 */
collapsedWidth: PropTypes.number.def(48),
/* 是否分割菜单 (仅 mix 模式有效) */
splitMenus: PropTypes.bool,
/* 控制菜单的收起和展开 */
collapsed: PropTypes.bool,
......
src/SiderMenu/BaseMenu.tsx
View file @ cb61ef3c
......@@ -9,6 +9,7 @@ import {
isVNode,
toRefs,
toRaw,
unref,
} from 'vue';
import { createFromIconfontCN } from '@ant-design/icons-vue';
import 'ant-design-vue/es/menu/style';
......@@ -180,7 +181,7 @@ export default defineComponent({
const { mode, i18n } = toRefs(props);
const isInline = computed(() => 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}
......
src/SiderMenu/SiderMenu.tsx
View file @ cb61ef3c
......@@ -88,15 +88,16 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (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<SiderMenuProps> = (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<SiderMenuProps> = (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]);
});
......
src/SiderMenu/index.tsx
View file @ cb61ef3c
......@@ -32,7 +32,7 @@ const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
);
};
SiderMenuWrapper.inheritAttrs = false;
SiderMenuWrapper.inheritAttrs = true;
SiderMenuWrapper.displayName = 'SiderMenuWrapper';
export default SiderMenuWrapper;
src/TopNavHeader/index.tsx
View file @ cb61ef3c
......@@ -63,7 +63,9 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = 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<TopNavHeaderProps> = props => {
light: props.theme === 'light',
};
});
console.log('onOpenKeys', onOpenKeys);
return (
<div class={className.value}>
<div ref={headerRef} class={`${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
......
yarn.lock
View file @ cb61ef3c
......@@ -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"
......
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