baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fix menu click range

Browse Source 
Fix menu click range

Change-Id: Iee68fac62d1f406b7f560ff16ca7e0829eda0c49
This commit is contained in:
Jingwei.Zhang 2021-12-03 16:00:57 +08:00
parent f37c2338a7
commit 6b05d343f1
2 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/layouts/Base/Menu.jsx
View File

@ -34,6 +34,7 @@ export class LayoutMenu extends Component {
hover: false, hover: false,
openKeys: [], openKeys: [],
}; };
this.maxTitleLength = 17;
} }
get menu() { get menu() {
@ -57,6 +58,10 @@ export class LayoutMenu extends Component {
return this.props.rootStore; return this.props.rootStore;
} }
get routing() {
return this.props.rootStore.routing;
}
onCollapse = (collapsed) => { onCollapse = (collapsed) => {
this.setState({ collapsed }); this.setState({ collapsed });
}; };
@ -97,6 +102,14 @@ export class LayoutMenu extends Component {
} }
}; };
onClickMenuItem = ({ key }) => {
const path = getPath({ key });
const { pathname } = this.props;
if (pathname !== path) {
this.routing.push(path);
}
};
renderMenuItem = (item) => { renderMenuItem = (item) => {
const { collapsed, hover } = this.state; const { collapsed, hover } = this.state;
if (collapsed && !hover) { if (collapsed && !hover) {
@ -112,18 +125,21 @@ export class LayoutMenu extends Component {
} }
if (!item.children || item.children.length === 0 || item.level) { if (!item.children || item.children.length === 0 || item.level) {
return ( return (
<Menu.Item key={item.key} className={styles['menu-item']}> <Menu.Item
key={item.key}
className={styles['menu-item']}
onClick={this.onClickMenuItem}
>
{/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
{item.icon} {item.icon}
<span> <span className={styles['menu-item-title']}>
<Link key={item.key} to={item.path}> {item.name.length >= this.maxTitleLength ? (
{item.name.length >= 14 ? ( <Tooltip title={item.name} placement="right">
<Tooltip title={item.name} placement="right"> {item.name}
{item.name} </Tooltip>
</Tooltip> ) : (
) : ( item.name
item.name )}
)}
</Link>
</span> </span>
</Menu.Item> </Menu.Item>
); );
@ -132,7 +148,7 @@ export class LayoutMenu extends Component {
<span> <span>
{item.icon} {item.icon}
<span> <span>
{item.name.length >= 14 ? ( {item.name.length >= this.maxTitleLength ? (
<Tooltip title={item.name} placement="right"> <Tooltip title={item.name} placement="right">
{item.name} {item.name}
</Tooltip> </Tooltip>

28
src/layouts/Base/index.less
View File

@ -99,6 +99,8 @@
.anticon { .anticon {
font-size: @size-normal; font-size: @size-normal;
margin-right: 20px; margin-right: 20px;
float: left;
line-height: 44px;
} }
& .ant-menu-item-selected { & .ant-menu-item-selected {
@ -135,17 +137,7 @@
padding-right: 5px; padding-right: 5px;
} }
.ant-menu-item > span > a { .ant-menu-item > span::before {
padding-left: 13px;
display: inline-block;
width: 100%;
color: transparent;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ant-menu-item > span > a::before {
position: absolute; position: absolute;
top: 18px; top: 18px;
bottom: 0; bottom: 0;
@ -157,11 +149,11 @@
border-radius: 50%; border-radius: 50%;
} }
.ant-menu-item-selected > span > a::before { .ant-menu-item-selected > span::before {
background-color: #fff !important; background-color: #fff !important;
} }
.ant-menu-item-active > span > a::before { .ant-menu-item-active > span::before {
background-color: @primary-color; background-color: @primary-color;
} }
@ -321,3 +313,13 @@
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
} }
.menu-item-title {
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 140px;
display: inline-block;
}
}