3 Star 21 Fork 9

前端摸鱼欧阳锋 / qf-sub-menu

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
readme.md

1.介绍

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

2.安装

npm i qf-sub-menu -S
yarn 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-ui
import 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>

Comments ( 0 )

Sign in for post a comment

About

基于二次封装的element-ui中的subMenu 通过这个组件,注入路由数据,能够快速渲染出菜单 spread retract
Cancel

Releases

No release

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
1
https://git.oschina.net/d718781500/qf-sub-menu.git
git@git.oschina.net:d718781500/qf-sub-menu.git
d718781500
qf-sub-menu
qf-sub-menu
master

Search