效果图
鼠标点击按钮 显示路由，只展开一个
前期准备
自定义路由图标
(1) 安装包依赖
npm install --save @ant-design/icons
(2) 构建基类
在 components 文件下面新建一个文件夹名字起名 Common,在 Common 里面在新建一个文件夹起名 Iconfont
在 iconfont 文件夹 下面新建一个 iconfont.js 文件
import { createFromIconfontCN } from '@ant-design/icons'
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1962285_oiwjxokadzm.js',
})
export default MyIcon
// scriptUrl 就是你在阿里图标库最后生成的地址-
(3) 使用的时候
import MyIcon from '../Iconfont/Iconfont'
//使用的时候就用如下即可 type里面的就是图标名称
//<MyIcon type="icon-Newuserzone"></MyIcon>开始使用路由
(1) 在 public 文件下新建一个文件夹 api
- 在 api 里面新建一个 menu.json 文件
;[
{
title: '首页',
key: '/admin/home',
icon: 'icon-gift',
},
{
title: 'UI',
key: '/admin/ui',
icon: 'icon-hot',
children: [
{
title: '按钮',
key: '/admin/ui/buttons',
icon: 'icon-Newuserzone',
},
{
title: '弹框',
key: '/admin/ui/modals',
icon: 'icon-Newuserzone',
},
{
title: 'Loading',
key: '/admin/ui/loadings',
icon: 'icon-Newuserzone',
},
{
title: '通知提醒',
key: '/admin/ui/notification',
icon: 'icon-Newuserzone',
},
{
title: '全局Message',
key: '/admin/ui/messages',
icon: 'icon-Newuserzone',
},
{
title: 'Tab页签',
key: '/admin/ui/tabs',
icon: 'icon-Newuserzone',
},
{
title: '瀑布流',
key: '/admin/ui/gallery',
icon: 'icon-Newuserzone',
},
{
title: '轮播图',
key: '/admin/ui/carousel',
icon: 'icon-Newuserzone',
},
],
},
{
title: '表单',
key: '/admin/form',
icon: 'icon-form',
children: [
{
title: '登录',
key: '/admin/form/login',
icon: 'icon-packaging',
},
{
title: '注册',
key: '/admin/form/reg',
icon: 'icon-packaging',
},
],
},
{
title: '表格',
key: '/admin/table',
icon: 'icon-security',
children: [
{
title: '基础表格',
key: '/admin/table/basic',
icon: 'icon-hot',
},
{
title: '高级表格',
key: '/admin/table/high',
icon: 'icon-hot',
},
],
},
{
title: '富文本',
key: '/admin/rich',
icon: 'icon-set',
},
{
title: '城市管理',
key: '/admin/city',
icon: 'icon-map',
},
{
title: '订单管理',
key: '/admin/order',
icon: 'icon-integral',
btnList: [
{
title: '订单详情',
key: '/admin/order/detail',
icon: 'icon-hot',
},
{
title: '结束订单',
key: '/admin/order/finish',
icon: 'icon-hot',
},
],
},
{
title: '员工管理',
key: '/admin/usermanage',
icon: 'icon-usercenter',
},
{
title: '车辆地图',
key: '/admin/bikeMap',
icon: 'icon-map',
},
{
title: '图表',
key: '/admin/charts',
icon: 'icon-map',
children: [
{
title: '柱形图',
key: '/admin/charts/bar',
icon: 'icon-certified-supplier',
},
{
title: '饼图',
key: '/admin/charts/pie',
icon: 'icon-certified-supplier',
},
{
title: '折线图',
key: '/admin/charts/line',
icon: 'icon-certified-supplier',
},
],
},
{
title: '权限设置',
key: '/admin/permission',
icon: 'icon-usercenter',
},
](2) 组件里面写内容
import React, { Component, Fragment } from 'react'
import { Menu } from 'antd'
import MyIcon from '../Iconfont/Iconfont'
import http from '../../../api/request'
import './Menu.less'
const { SubMenu } = Menu
class LeftMenu extends Component {
constructor(props) {
super(props)
this.state = {
openKeys: ['/admin/ui'],
menuList: [],
}
this.onOpenChange = this.onOpenChange.bind(this)
this.handleClick = this.handleClick.bind(this)
}
componentDidMount() {
this.getMenuList()
}
render() {
return (
<Fragment>
<Menu
mode="inline"
openKeys={this.state.openKeys}
onOpenChange={this.onOpenChange}
style={{ width: '100%', background: '#001529', color: '#ccc' }}
onClick={this.handleClick}
>
{this.state.menuList.map((content, index) => {
if (content.children) {
return (
<SubMenu
title={content.title}
key={content.key}
icon={<MyIcon type={content.icon}></MyIcon>}
>
{content.children.map((item, index2) => {
return (
<Menu.Item
key={item.key}
icon={<MyIcon type={item.icon}></MyIcon>}
>
{item.title}
</Menu.Item>
)
})}
</SubMenu>
)
} else {
return (
<Menu.Item
key={content.key}
icon={<MyIcon type={content.icon}></MyIcon>}
>
{content.title}
</Menu.Item>
)
}
})}
</Menu>
</Fragment>
)
}
onOpenChange(openKeys) {
console.log(openKeys)
const latestOpenKey = openKeys.find(
(key) => this.state.openKeys.indexOf(key) === -1
)
this.state.menuList.forEach((item, index) => {
console.log(item.key)
console.log(latestOpenKey)
this.setState({
openKeys: latestOpenKey ? [latestOpenKey] : [],
})
})
}
getMenuList() {
let _this = this
http.get('/api/menu.json').then((res) => {
_this.setState({
menuList: res.data,
})
})
}
handleClick(e) {
console.log(e)
}
}
export default LeftMenumenu.less
.ant-menu-submenu-popup>.ant-menu {
background: #001529;
color: white;
box-shadow: none;
}
.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
color: #ffe493;
}
.ant-menu-item {
.anticon {
font-size: 20px !important;
//改变图标位置依据情况
vertical-align: -0.25em;
}
}
.ant-menu-submenu-title {
.anticon {
font-size: 20px !important;
//改变图标位置依据情况
vertical-align: -0.25em;
}
}
// 点击以后改变颜色
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: none;
color: #ffe493;
}
.ant-menu-submenu-selected {
color: #ffe493 !important;
}
//改变第二种颜色
.ant-menu-submenu {
.ant-menu {
background: #001529;
color: white;
box-shadow: none;
}
}
// 改变小三角
.ant-menu-submenu-arrow:before,
.ant-menu-submenu-arrow:after {
background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) !important;
}
//鼠标放上去
.ant-menu-submenu-active {
.ant-menu-submenu-arrow:before {
background-image: #ffe493;
}
}
.ant-menu-submenu-active {
.ant-menu-submenu-arrow:after {
background-image: #ffe493;
}
}
//去掉1px
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
border-right: none;
}
