devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React+Ant Design左侧二级导航菜单_antdesign左侧菜单在哪个文件

作者：小小林熬夜学编程 | 2024-02-19 06:38:29

赞

踩

antdesign左侧菜单在哪个文件

package.json：

  1. {
  2.   "name": "antd-demo",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "dependencies": {
  6.     "@ant-design/icons": "^4.2.1",
  7.     "@babel/core": "7.9.0",
  8.     "@svgr/webpack": "4.3.3",
  9.     "@testing-library/jest-dom": "^4.2.4",
  10.     "@testing-library/react": "^9.3.2",
  11.     "@testing-library/user-event": "^7.1.2",
  12.     "@typescript-eslint/eslint-plugin": "^2.10.0",
  13.     "@typescript-eslint/parser": "^2.10.0",
  14.     "antd": "^4.7.0",
  15.     "axios": "^0.19.2",
  16.     "babel-eslint": "10.1.0",
  17.     "babel-jest": "^24.9.0",
  18.     "babel-loader": "8.1.0",
  19.     "babel-plugin-import": "^1.13.0",
  20.     "babel-plugin-named-asset-import": "^0.3.6",
  21.     "babel-preset-react-app": "^9.1.2",
  22.     "camelcase": "^5.3.1",
  23.     "case-sensitive-paths-webpack-plugin": "2.3.0",
  24.     "css-loader": "3.4.2",
  25.     "dotenv": "8.2.0",
  26.     "dotenv-expand": "5.1.0",
  27.     "echarts": "^4.9.0",
  28.     "echarts-for-react": "^2.0.16",
  29.     "eslint": "^6.6.0",
  30.     "eslint-config-react-app": "^5.2.1",
  31.     "eslint-loader": "3.0.3",
  32.     "eslint-plugin-flowtype": "4.6.0",
  33.     "eslint-plugin-import": "2.20.1",
  34.     "eslint-plugin-jsx-a11y": "6.2.3",
  35.     "eslint-plugin-react": "7.19.0",
  36.     "eslint-plugin-react-hooks": "^1.6.1",
  37.     "file-loader": "4.3.0",
  38.     "fs-extra": "^8.1.0",
  39.     "html-webpack-plugin": "4.0.0-beta.11",
  40.     "identity-obj-proxy": "3.0.0",
  41.     "jest": "24.9.0",
  42.     "jest-environment-jsdom-fourteen": "1.0.1",
  43.     "jest-resolve": "24.9.0",
  44.     "jest-watch-typeahead": "0.4.2",
  45.     "mini-css-extract-plugin": "0.9.0",
  46.     "optimize-css-assets-webpack-plugin": "5.0.3",
  47.     "pnp-webpack-plugin": "1.6.4",
  48.     "postcss-flexbugs-fixes": "4.1.0",
  49.     "postcss-loader": "3.0.0",
  50.     "postcss-normalize": "8.0.1",
  51.     "postcss-preset-env": "6.7.0",
  52.     "postcss-safe-parser": "4.0.1",
  53.     "react": "^16.13.1",
  54.     "react-app-polyfill": "^1.0.6",
  55.     "react-dev-utils": "^10.2.1",
  56.     "react-dom": "^16.13.1",
  57.     "react-router": "^4.2.0",
  58.     "react-router-dom": "^4.2.0",
  59.     "react-transition-group": "^4.4.1",
  60.     "redux": "^4.0.5",
  61.     "resolve": "1.15.0",
  62.     "resolve-url-loader": "3.1.1",
  63.     "sass-loader": "8.0.2",
  64.     "semver": "6.3.0",
  65.     "style-loader": "0.23.1",
  66.     "terser-webpack-plugin": "2.3.5",
  67.     "ts-pnp": "1.1.6",
  68.     "url-loader": "2.3.0",
  69.     "webpack": "4.42.0",
  70.     "webpack-dev-server": "3.10.3",
  71.     "webpack-manifest-plugin": "2.2.0",
  72.     "workbox-webpack-plugin": "4.3.1"
  73.   },
  74.   "scripts": {
  75.     "start": "node scripts/start.js",
  76.     "build": "node scripts/build.js",
  77.     "test": "node scripts/test.js"
  78.   },
  79.   "eslintConfig": {
  80.     "extends": "react-app"
  81.   },
  82.   "proxy": "http://localhost:9999",
  83.   "homepage": ".",
  84.   "browserslist": {
  85.     "production": [
  86.       ">0.2%",
  87.       "not dead",
  88.       "not op_mini all"
  89.     ],
  90.     "development": [
  91.       "last 1 chrome version",
  92.       "last 1 firefox version",
  93.       "last 1 safari version"
  94.     ]
  95.   },
  96.   "jest": {
  97.     "roots": [
  98.       "<rootDir>/src"
  99.     ],
  100.     "collectCoverageFrom": [
  101.       "src/**/*.{js,jsx,ts,tsx}",
  102.       "!src/**/*.d.ts"
  103.     ],
  104.     "setupFiles": [
  105.       "react-app-polyfill/jsdom"
  106.     ],
  107.     "setupFilesAfterEnv": [
  108.       "<rootDir>/src/setupTests.js"
  109.     ],
  110.     "testMatch": [
  111.       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
  112.       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
  113.     ],
  114.     "testEnvironment": "jest-environment-jsdom-fourteen",
  115.     "transform": {
  116.       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
  117.       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  118.       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
  119.     },
  120.     "transformIgnorePatterns": [
  121.       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
  122.       "^.+\\.module\\.(css|sass|scss)$"
  123.     ],
  124.     "modulePaths": [],
  125.     "moduleNameMapper": {
  126.       "^react-native$": "react-native-web",
  127.       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
  128.     },
  129.     "moduleFileExtensions": [
  130.       "web.js",
  131.       "js",
  132.       "web.ts",
  133.       "ts",
  134.       "web.tsx",
  135.       "tsx",
  136.       "json",
  137.       "web.jsx",
  138.       "jsx",
  139.       "node"
  140.     ],
  141.     "watchPlugins": [
  142.       "jest-watch-typeahead/filename",
  143.       "jest-watch-typeahead/testname"
  144.     ]
  145.   },
  146.   "devDependencies": {
  147.     "less": "^3.12.2",
  148.     "less-loader": "^6.2.0"
  149.   }
  150. }

config/route-config.js（菜单配置文件）：

  1. import { SnippetsFilled, PieChartFilled, PieChartOutlined, ProfileOutlined, FileWordOutlined, FileTextOutlined , BarChartOutlined, WhatsAppOutlined, ExclamationCircleOutlined, IeOutlined, SketchOutlined } from '@ant-design/icons';
  2.  
  3. const MenuList = [
  4.     {
  5.         title: '首页', // 菜单标题名称
  6.         key: '/home', // 对应的path
  7.         icon: SnippetsFilled, // 图标名称,
  8.         children: [ // 子菜单列表
  9.             {
  10.                 title: '监控页',
  11.                 key: '/monitor',
  12.                 icon: 'bars'
  13.             },
  14.             {
  15.                 title: '分析页',
  16.                 key: '/home',
  17.                 icon: 'bars'
  18.             },
  19.             {
  20.                 title: '工作台',
  21.                 key: '/workbench',
  22.                 icon: 'bars'
  23.             }
  24.         ]
  25.     },
  26.     {
  27.         title: '数据录入',
  28.         key: '/data_input',
  29.         icon: PieChartFilled,
  30.         children: [ // 子菜单列表
  31.             {
  32.                 title: 'form',
  33.                 key: '/form',
  34.                 icon: 'bars'
  35.             }
  36.         ]
  37.     },
  38.     {
  39.         title: '数据展示',
  40.         key: '/data_show',
  41.         icon: BarChartOutlined,
  42.         children: [
  43.             {
  44.                 title: 'table',
  45.                 key: '/table',
  46.                 icon: 'bar-chart'
  47.             },
  48.             {
  49.                 title: 'timeline ',
  50.                 key: '/timeline',
  51.                 icon: 'line-chart'
  52.             },
  53.             {
  54.                 title: 'descriptions ',
  55.                 key: '/descriptions',
  56.                 icon: 'line-chart'
  57.             }
  58.         ]
  59.     },
  60.     {
  61.         title: '反馈',
  62.         key: '/feedback',
  63.         icon: WhatsAppOutlined,
  64.         children: [
  65.             {
  66.                 title: 'modal',
  67.                 key: '/modal1',
  68.                 icon: 'bar-chart'
  69.             },
  70.             {
  71.                 title: 'notification',
  72.                 key: '/notification',
  73.                 icon: 'line-chart'
  74.             }
  75.         ]
  76.     },
  77.     {
  78.         title: '图表',
  79.         key: '/charts',
  80.         icon: PieChartOutlined,
  81.         children: [
  82.             {
  83.                 title: 'bar',
  84.                 key: '/bar',
  85.                 icon: 'bar-chart'
  86.             },
  87.             {
  88.                 title: 'line',
  89.                 key: '/line',
  90.                 icon: 'line-chart'
  91.             },
  92.             {
  93.                 title: 'pie',
  94.                 key: '/pie',
  95.                 icon: 'pie-chart'
  96.             }
  97.         ]
  98.     },
  99.     {
  100.         title: '异常页',
  101.         key: '/abnormal',
  102.         icon: ExclamationCircleOutlined,
  103.         children: [
  104.             {
  105.                 title: '403',
  106.                 key: '/403',
  107.                 icon: 'bar-chart'
  108.             },
  109.             {
  110.                 title: '404',
  111.                 key: '/404',
  112.                 icon: 'line-chart'
  113.             },
  114.             {
  115.                 title: '500',
  116.                 key: '/500',
  117.                 icon: 'pie-chart'
  118.             }
  119.         ]
  120.     },
  121.     {
  122.         title: '表单页',
  123.         key: '/form',
  124.         icon: FileTextOutlined,
  125.         children: [
  126.             {
  127.                 title: '基础表单',
  128.                 key: '/base-form',
  129.                 icon: 'bar-chart'
  130.             },
  131.             {
  132.                 title: '模态表单',
  133.                 key: '/modal-form',
  134.                 icon: 'bar-chart'
  135.             },
  136.             {
  137.                 title: '分步表单',
  138.                 key: '/step-form',
  139.                 icon: 'line-chart'
  140.             },
  141.             {
  142.                 title: '高级表单',
  143.                 key: '/advanced-form',
  144.                 icon: 'pie-chart'
  145.             }
  146.         ]
  147.     },
  148.     {
  149.         title: '列表页',
  150.         key: '/list',
  151.         icon: ProfileOutlined,
  152.         children: [
  153.             {
  154.                 title: '搜索列表',
  155.                 key: '/search-list',
  156.                 icon: 'bar-chart'
  157.             },
  158.             {
  159.                 title: '查询表格',
  160.                 key: '/query-table',
  161.                 icon: 'line-chart'
  162.             },
  163.             {
  164.                 title: '标准列表',
  165.                 key: '/standard-list',
  166.                 icon: 'pie-chart'
  167.             },
  168.             {
  169.                 title: '卡片列表',
  170.                 key: '/card-list',
  171.                 icon: 'pie-chart'
  172.             },
  173.             {
  174.                 title: '树列表',
  175.                 key: '/tree-list',
  176.                 icon: 'pie-chart'
  177.             }
  178.         ]
  179.     },
  180.     {
  181.         title: '详情页',
  182.         key: '/detail',
  183.         icon: FileWordOutlined,
  184.         children: [
  185.             {
  186.                 title: '基础详情页',
  187.                 key: '/base-detail',
  188.                 icon: 'bar-chart'
  189.             },
  190.             {
  191.                 title: '高级详情页',
  192.                 key: '/senior-detail',
  193.                 icon: 'line-chart'
  194.             }
  195.         ]
  196.     },
  197.     {
  198.         title: '网盘',
  199.         key: '/webdisk',
  200.         icon: IeOutlined,
  201.         children: [
  202.             {
  203.                 title: '管理员管理',
  204.                 key: '/administrator',
  205.                 icon: 'bar-chart'
  206.             },
  207.             {
  208.                 title: '审计日志管理',
  209.                 key: '/log',
  210.                 icon: 'line-chart'
  211.             },
  212.             {
  213.                 title: '收到的共享',
  214.                 key: '/myshare',
  215.                 icon: 'line-chart'
  216.             },
  217.             {
  218.                 title: 'USBKEY',
  219.                 key: '/usbkey',
  220.                 icon: 'line-chart'
  221.             }
  222.         ]
  223.     },
  224.     {
  225.         title: '加固',
  226.         key: '/firmstor',
  227.         icon: SketchOutlined,
  228.         children: [
  229.             {
  230.                 title: '基本信息',
  231.                 key: '/baseinfo',
  232.                 icon: 'bar-chart'
  233.             },
  234.             {
  235.                 title: '保险箱文件恢复',
  236.                 key: '/file-recovery',
  237.                 icon: 'bar-chart'
  238.             }
  239.         ]
  240.     }
  241. ]
  242.  
  243. export default MenuList

left-nav.jsx：

  1. import React, { Component } from 'react'
  2. import { Menu } from 'antd';
  3. import { Link, withRouter } from 'react-router-dom'
  4. import MenuList from '../../config/route-config'
  5. import './index.less'
  6.  
  7. const { SubMenu } = Menu;
  8.  
  9. class LeftNav extends Component {
  10.     state = {
  11.         rootSubmenuKeys: [], //只展开当前父级菜单
  12.         openKeys: [], // 默认展开的菜单项
  13.     };
  14.  
  15.     // 只展开当前父级菜单
  16.     onOpenChange = openKeys => {
  17.         const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  18.         if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  19.             this.setState({ openKeys });
  20.         } else {
  21.             this.setState({
  22.                 openKeys: latestOpenKey ? [latestOpenKey] : [],
  23.             });
  24.         }
  25.     };
  26.  
  27.     // 获取左侧菜单
  28.     getMenuNodes = MenuList => {
  29.         const path = this.props.location.pathname;
  30.  
  31.         return MenuList.map(item => {
  32.             if (!item.children) {
  33.                 return (
  34.                     <Menu.Item key={item.key} icon={<item.icon />}>
  35.                         <Link to={item.key}>
  36.                             <span>{item.title}</span>
  37.                         </Link>
  38.                     </Menu.Item>
  39.                 )
  40.             } else {
  41.                 this.state.rootSubmenuKeys.push(item.key);
  42.  
  43.                 // 查找一个与当前请求路径匹配的子Item
  44.                 const childItem = item.children.find(cItem => path.indexOf(cItem.key) === 0);
  45.                 // 如果存在, 说明当前item的子列表需要打开
  46.                 if (childItem) {
  47.                     this.setState({
  48.                         openKeys: [item.key]
  49.                     })
  50.                 }
  51.  
  52.                 return (
  53.                     <SubMenu
  54.                         key={item.key}
  55.                         icon={<item.icon />}
  56.                         title={item.title}
  57.                     >
  58.                         {this.getMenuNodes(item.children)}
  59.                     </SubMenu>
  60.                 )
  61.             }
  62.         })
  63.     }
  64.  
  65.     componentWillMount() {
  66.         this.menuNodes = this.getMenuNodes(MenuList);
  67.     }
  68.  
  69.     render() {
  70.         /*selectedKeys：控制默认高亮菜单项，defaultOpenKeys、openKeys、onOpenChange：控制菜单展开*/
  71.         return (
  72.             <Menu
  73.                 theme="dark"
  74.                 mode="inline"
  75.                 selectedKeys={this.props.location.pathname}
  76.                 defaultOpenKeys={this.state.openKeys}
  77.                 openKeys={this.state.openKeys}
  78.                 onOpenChange={this.onOpenChange}
  79.                 style={{ height: '100%', borderRight: 0, paddingTop: '60px' }}
  80.             >
  81.                 {
  82.                     this.menuNodes
  83.                 }
  84.             </Menu>
  85.         )
  86.     }
  87. }
  88.  
  89. export default withRouter(LeftNav)

index.less：

  1. .ant-menu {
  2.     overflow: auto!important;
  3. }
  4. .ant-menu::-webkit-scrollbar {
  5.     /*滚动条整体样式*/
  6.     width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  7.     height: 1px;
  8. }
  9. .ant-menu::-webkit-scrollbar-thumb {
  10.     /*滚动条里面小方块*/
  11.     border-radius: 10px;
  12.     box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  13.     background   : #535353;
  14. }
  15. .ant-menu::-webkit-scrollbar-track {
  16.     /*滚动条里面轨道*/
  17.     box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  18.     border-radius: 10px;
  19.     background   : #ededed;
  20. }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/113154
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号