开源软件名称：

qf-sub-menu

开源软件地址：

https://gitee.com/d718781500/qf-sub-menu

开源软件介绍：

1.介绍

这是一个基于element-ui二次封装的一个侧边菜单栏组件,能快捷的根据数据,生成响应的子菜单,并且解决路径被激活的时候,菜单不激活的问题

2.安装

npm i qf-sub-menu -Syarn add qf-sub-menu

3. 使用

1.定义数据源

首先需要有一组数据,基于权限生成的用户菜单路由配置数据,这些数据应该是这样的

const routes = [  {    path: 'Welcome',    name: 'Welcome',    component: Welcome,    meta: {      name: '管理首页',      icon: 'iconfont icon-shouye'    }  },  {    path: 'StudentManager',    name: 'StudentManager',    redirect:"/StudentManager/studentProduct",    component: StudentManager,    meta: {      name: '学员管理',      icon: 'iconfont icon-xueyuan'    },    children: [      {        path: 'studentProduct',        name: 'studentProduct',        component: studentProduct,        meta: {          name: '学员项目管理',          icon: 'iconfont icon-wode1'        }      },      {        path: 'studentProfile',        name: 'studentProfile',        component: studentProfile,        meta: {          name: '学员资料',          icon: 'iconfont icon-kaoqin2'        }      },      {        path: 'studentDormitory',        name: 'studentDormitory',        component: studentDormitory,        meta: {          name: '学员宿舍',          icon: 'iconfont icon-shuju2'        }      }    ]  }]const router = new VueRouter({  routes})export default router

如上所示,meta属性中,name属性最后会生成菜单名字,如果具有children属性,那么会对应生成子菜单,icon属性就是存放的菜单的图标类名(前提先安装字体图标)

2.修改main.js

引入qf-sub-menu组件,因为我们的组件基于element-ui二次封装,所以,我们要先配置element-ui

element-ui

安装element-ui

yarn add element-ui

import Vue from "vue"import App from "./App"// 引入element-uiimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import qfSubMenu from "qf-sub-menu" //引入我们的组件Vue.use(ElementUI)//使用Vue.use()将组件注入到所有的子组件Vue.use(qfSubMenu)new Vue({	h=>h(App)}).$mount('#app')

3.嵌套在 element组件中的el-menu

像正常组件一样使用 ,并且需要注入数据源属性名必须是 sideMenu(就是3-1所描述的数据源) 代码示例如下:

<el-menu :default-active="$route.path"                 class="el-menu-vertical-demo"                 text-color="#4e5bf8"                 ref="sideMenu"                 active-text-color="#E47833"                 :collapse="isCollapse">    	//我们的组件          <qf-sub-menu :sideMenu='sideMenu'></qf-sub-menu>        </el-menu>

4.启用菜单激活样式

务必配合路由使用

直接在el-menu组件上加上属性 :default-active="$route.path"

//:default-active="$route.path" <el-menu :default-active="$route.path" //加上此属性                 class="el-menu-vertical-demo"                 text-color="#4e5bf8"                 ref="sideMenu"                 active-text-color="#E47833"                 :collapse="isCollapse">          <!-- <subMenu :sideMenu='sideMenu'></subMenu> -->          <sub-menu :sideMenu='sideMenu'></sub-menu>        </el-menu>