--- theme: channing-cyan --- ## 概述 > **做什么：封装通用左侧菜单栏组件** > > **怎么做：使用 `Element-Plus` 组件库中的 `el-menu`组件进行二次封装** > > **技术栈：Vue3 + Ts + Vite，且采用 setup 语法糖写法** > > **准备工作：请各位自行引入Element-plus组件库，本文中有用到 svg组件，svg组件封装教程请看`第五点`** ## 一、先看效果 #### 1.1 静态效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df841ffd722f4be5a08240ae869f5000~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1027\&h=539\&s=26268\&e=png\&b=ffffff) #### 1.2 动态效果 ![请添加图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d85667b46ef4ead9281f5d32e1939a8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2539\&h=1270\&s=824430\&e=gif\&f=106\&b=f8fafb) *** ## 二、核心思路 > **查看 `Element-plus` 组件库中的 `el-menu` 组件，不难发现，菜单栏大致可以分为两类，`一`类是有子菜单的`，一类是无子菜单的`。 > 所以我们将对这两类进行分情况设计，再`结合递归`，即可完成根据路由列表，`动态渲染`菜单栏** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8f4bd10bcd241ff8a188cf9313746b3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1541\&h=870\&s=117435\&e=png\&b=ffffff) *** ## 三、全量代码 #### 3.1 文件目录结构 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31f38ae3f2ae4a7fa88efa16e2f57f76~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=672\&h=201\&s=58011\&e=png\&b=22313a) #### 3.2 /sidebar/index.vue 中 ```bash ``` #### 3.3 /sidebar/sidebarItem.vue 中 ```bash ``` #### 3.4 路由表结构 > **isShow: true, // 控制当前项是否在菜单栏中渲染出来，比如你写了 login 页面的路由，但是并不希望 login在menu菜单中渲染出来，即可设为false > title: '首页', // menu菜单项的名称，没啥好说的 > icon: 'menu-home' // menu菜单项的图标，我此处是与封装好的 svg 组件结合使用的** ```bash export default [ { path: '/layout', name: 'layoutIndex', component: () => import('@/layout/index.vue'), children: [ { path: '/home', name: 'homeIndex', component: () => import('@/views/home/index.vue'), meta: { isShow: true, // 控制当前项是否在菜单栏中渲染出来，比如你写了 login 页面的路由，但是并不希望 login在menu菜单中渲染出来，即可设为false title: '首页', // menu菜单项的名称，没啥好说的 icon: 'menu-home' // menu菜单项的图标，我此处是与封装好的 svg 组件结合使用的 } }, { path: '/echarts', name: 'echartIndex', // component: () => import('@/views/echarts/index.vue'), meta: { isShow: true, title: 'Echarts页', icon: 'menu-echarts' }, children: [ { path: '/echarts/barCharts', name: 'barCharts', component: () => import('@/views/echarts/barCharts.vue'), meta: { title: '柱状图' } }, { path: '/echarts/pieCharts', name: 'pieCharts', component: () => import('@/views/echarts/pieCharts.vue'), meta: { title: '饼图' } } ] }, { path: '/package', name: 'packageIndex', component: () => import('@/views/package/index.vue'), meta: { isShow: true, title: '组件', icon: 'menu-package' } }, { path: '/menu', name: 'menuIndex', redirect: '/menu/menu-1', meta: { isShow: true, title: '一级菜单', icon: 'menu-package' }, children: [ { path: '/menu/menu-1', name: 'menu-1', component: () => import('@/views/menu/menu1.vue'), meta: { title: '二级菜单-1' } }, { path: '/menu/menu-2', name: 'menu-2', component: () => import('@/views/menu/menu2.vue'), meta: { title: '二级菜单-2' }, children: [ { path: '/menu/menu-2/children', name: 'menu3', component: () => import('@/views/menu/menu3.vue'), meta: { title: '三级菜单' } } ] } ] } ] } ]; ``` *** ## 四、代码讲解 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4fcdd4de18041ca91227b1d253c9e57~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1675\&h=871\&s=753454\&e=png\&b=23313d) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d5f6b5101ee4e209728593c01674a91~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1621\&h=892\&s=797135\&e=png\&b=23313d) *** ## 五、SVG组件 > **本文不展开讲解 `svg组件` 的封装与使用，有需要的朋友欢迎参考下面的 `svg组件` 封装教程** **svg组件封装教程：**