新建index.less
文件并引入
.qf-header{
height: 64px;
background: #fff;
.logo{
height:64px;
img{
height:64px;
}
}
}
2-3 实现左侧的菜单展示
只需要给routes/index.js
文件里面添加isNav标识
与title
export const admainRoute = [
{
pathname:“/admin/dashboard”,
component:Dashboard,
title:“仪表盘”,
isNav:true
},
{
pathname:“/admin/article”,
component:Article,
exact:true,
title:“文章列表”,
isNav:true
},
{
pathname:“/admin/article/edit/:id”,
component:ArticleEdit,
},
{
pathname:“/admin/settings”,
component:Settings,
title:“设置”,
isNav:true
},
]
Frame组件
里面,对于adminRoute的isNav为true进行过滤
即可
const menu = admainRoute.filter(route=>route.isNav === true)
components/frame/index.js
文件 这里省略其余代码,只显示关键代码
mode=“inline”
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
style={{ height: ‘100%’ }}
{
menu.map(route=>{
return (
<Menu.Item key={route.pathname}>{route.title}</Menu.Item>
)
})
}
2-4 实现左侧的小图标
需要安装 yarn add @ant-design/icons
routes/index.js
文件进行修改
//使用antd里面的icon图标
import {
DashboardOutlined,
OrderedListOutlined,
SettingOutlined
} from ‘@ant-design/icons’;
import React from “react” //React必须要进行引入进来,作用就是帮助我们解析内部的jsx代码
export const admainRoute = [
{
pathname:“/admin/dashboard”,
component:Dashboard,
title:“仪表盘”,
isNav:true,
icon:
},
{
pathname:“/admin/article”,
component:Article,
exact:true,
title:“文章列表”,
isNav:true,
icon:
},
{
pathname:“/admin/article/edit/:id”,
component:ArticleEdit,
},
{
pathname:“/admin/settings”,
component:Settings,
title:“设置”,
isNav:true,
icon:
},
]
components/frame/index.js
文件 这里省略其余代码,只显示关键代码
mode=“inline”
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
style={{ height: ‘100%’ }}
{
menu.map(route=>{
return (
<Menu.Item key={route.pathname}>
{route.icon}
{route.title}
</Menu.Item>
)
})
}
2-5 实现点击菜单切换
需要查找Antd里面关于Menu菜单项,发现Menu的api上面有onClick方法
,
作用就是当我们点击每一项菜单的时候,这个事件函数就会触发,关键的一个参数是key
,就可以拿到对应的切换的当前路由路径
获取到key
之后,我们只需要调用this.props.history.push(key)
即可实现路由跳转,继而实现了菜单切换功能。
**//当我们点击Menu.Item的时候会触发
//路由相关的api history location match**
handleMenu = ({key})=>{
this.props.history.push(key)
}
mode=“inline”
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
style={{ height: ‘100%’ }}
onClick = {this.handleMenu}
{
…
}
发现上述代码报错,原因是Frame组件不是路由组件
,属性上面就不会有history相关的路由的api,
解决方案就是需要引入高阶组件withRouter进行嵌套包裹。
可以将目前的Frame组件包裹成伪路由组件,那么Frame组件属性上面自然就会有了history/location/match相关的api了,继而可以实现跳转功能了。
import {withRouter} from “react-router-dom”
@withRouter
class index extends Component {
…
}
export default index
实现了左侧菜单项颜色的切换效果
**运行之后会发现存在一些bug,通过api属性解决
**
Menu菜单的api属性上面有:
defaultSelectedKeys 初始选中的菜单项 key 数组
selectedKeys 当前选中的菜单项 key 数组
mode=“inline”
defaultSelectedKeys={[menu[0].pathname]}
selectedKeys={[this.props.location.pathname]}
style={{ height: ‘100%’ }}
onClick = {this.handleMenu}
…
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中…(img-CMmNFf71-1715587880509)]
[外链图片转存中…(img-RI9tvc1E-1715587880510)]
[外链图片转存中…(img-0p6dPmzS-1715587880510)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!