Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-platform
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
陈智峰
jinfa-platform
Commits
a2c341bd
Commit
a2c341bd
authored
Aug 26, 2020
by
前端-许佳敏
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
优化菜单显示
parent
85c6145d
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
33 additions
and
2 deletions
+33
-2
BasicLayout.tsx
src/layouts/BasicLayout.tsx
+33
-2
No files found.
src/layouts/BasicLayout.tsx
View file @
a2c341bd
...
...
@@ -12,6 +12,7 @@ import RightContent from './components/RightContent';
// import logo from '../assets/logo.svg';
import
logo
from
'../../mockStatic/logo.png'
import
MenuSlider
from
'./components/MenuSlider'
import
{
getMatchMenu
}
from
'@umijs/route-utils'
;
export
interface
BasicLayoutProps
extends
ProLayoutProps
{
breadcrumbNameMap
:
{
...
...
@@ -31,6 +32,23 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
};
};
export
const
getSelectedMenuKeys
=
(
pathname
:
string
,
menuData
:
MenuDataItem
[],
):
string
[]
=>
{
const
menus
=
getMatchMenu
(
pathname
,
menuData
);
const
dispatchMenu
=
menus
.
map
(
v
=>
{
if
(
v
.
hideInMenu
)
{
const
flag
=
v
.
key
||
v
.
path
||
''
const
substr
=
flag
.
substr
(
0
,
flag
.
lastIndexOf
(
'/'
))
v
.
path
=
substr
v
.
key
=
substr
}
return
v
})
return
dispatchMenu
.
map
(
item
=>
item
.
key
||
item
.
path
||
''
);
};
const
defaultFooterDom
=
(
<
DefaultFooter
copyright=
{
`${new Date().getFullYear()} 技术组体验出品`
}
...
...
@@ -63,7 +81,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
};
const
[
openKeys
,
setOpenKeys
]
=
useState
<
string
[]
>
([])
const
[
collapsed
,
setCollapsed
]
=
useState
(
false
)
const
[
selectedKeys
,
setSelectedKeys
]
=
useState
<
string
[]
|
undefined
>
([]);
const
handleMenuCollapse
=
(
payload
:
boolean
):
void
=>
{
setCollapsed
(
payload
)
if
(
payload
)
{
...
...
@@ -90,6 +108,19 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
const
menuRouter
=
getMenuRouter
(
menuData
,
location
.
pathname
)
useEffect
(()
=>
{
// if pathname can't match, use the nearest parent's key
const
keys
=
getSelectedMenuKeys
(
location
.
pathname
||
'/'
,
basicInfo
.
menuData
||
[],
);
const
animationFrameId
=
requestAnimationFrame
(()
=>
{
setSelectedKeys
(
keys
);
});
return
()
=>
window
.
cancelAnimationFrame
&&
window
.
cancelAnimationFrame
(
animationFrameId
);
},
[
location
.
pathname
]);
useEffect
(()
=>
{
if
(
menuRouter
&&
menuRouter
.
children
)
{
if
(
collapsed
)
{
setOpenKeys
([])
...
...
@@ -118,7 +149,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
]
}
menuRender=
{
()
=>
<
MenuSlider
currentSelectKey=
{
[
location
.
pathname
]
}
currentSelectKey=
{
selectedKeys
}
openKeys=
{
openKeys
}
menuData=
{
menuData
}
pathname=
{
location
.
pathname
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment