ReactAntd(三) ANTD 导航第一种情况

效果图

鼠标放上去 显示路由

前期准备

自定义路由图标

(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) 在路由组件里面写内容

• handclick 里面写路由跳转函数

import React, { Component, Fragment } from 'react'
import { Menu } from 'antd'
import './Menu.less'
import MyIcon from '../Iconfont/Iconfont'
import http from '../../../api/request'
class MenuComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '导航',
      menuList: [],
    }
    this.handleClick = this.handleClick.bind(this)
  }
  componentDidMount() {
    this.getMenuList()
  }
  render() {
    const { SubMenu } = Menu
    return (
      <Fragment>
        <Menu
          onClick={this.handleClick}
          style={{ width: '100%', background: '#001529', color: '#ccc' }}
          mode="vertical"
        >
          {this.state.menuList.map((content, index) => {
            if (content.children) {
              return (
                <SubMenu
                  title={content.title}
                  key={index}
                  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={index}
                  icon={<MyIcon type={content.icon}></MyIcon>}
                >
                  {content.title}
                </Menu.Item>
              )
            }
          })}
        </Menu>
      </Fragment>
    )
  }
  handleClick(e) {
    console.log('click', e)
  }
  getMenuList() {
    let _this = this
    http.get('/api/menu.json').then((res) => {
      _this.setState({
        menuList: res.data,
      })
    })
  }
}

export default MenuComponent

(3) menu.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-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;
}