菜单组件

Author: tangJunGit

src/assets/less/common.less

@@ -141,7 +141,7 @@ body{
  right: 0;
  z-index: 99;
  .el-tabs{
- .el-tabs__item{
+ .el-tabs__header .el-tabs__nav .el-tabs__item{
  height: 30px;
  line-height: 30px;
  font-size: 12px;
@@ -163,6 +163,9 @@ body{
  font-size: 12px;
  color: #606266;
  }
+ .el-breadcrumb__separator{
+ margin: 0 2px;
+ }
  }
  }
  .el-tabs__nav-next, .el-tabs__nav-prev{

src/assets/less/theme.less

@@ -35,6 +35,7 @@
  background-color: @color;
  }
  .menu-theme{
+ width: @menu-width;
  .menu-list:not(.el-menu--collapse) {
  width: @menu-width;
  }

src/components/index.js

@@ -1,6 +1,6 @@
-import routerTab from "./router-tab.vue";
+import MenuTree from "./menu-tree.vue";
 
 // 导出组件
 export {
- routerTab
+  MenuTree
 }

src/components/menu-tree.vue

@@ -0,0 +1,27 @@
+<template>
+ <div>
+ <template v-for="item in menuLIst">
+ <el-submenu v-if="item.children && item.children.length" :key="item.index" :index="item.index">
+ <template slot="title">
+ <span>{{item.label}}</span>
+ </template>
+ <MenuTree :menuLIst="item.children" @clickMenuItem="clickMenu"></MenuTree>
+ </el-submenu>
+ <el-menu-item v-else :key="item.index" :index="item.index" @click="goto(item)">{{item.label}}</el-menu-item>
+ </template>
+ </div>
+</template>
+<script>
+ export default {
+ props: ['menuLIst'],
+ name: 'MenuTree',
+ methods: {
+ goto (item) {
+ this.$emit('clickMenuItem', item);
+ },
+ clickMenu(item){
+ this.goto(item);
+ }
+ }
+ }
+</script>

src/store/index.js

@@ -1,7 +1,9 @@
 import demo from './modules/demo'
 import routerTab from './modules/router-tab'
+import menuList from './modules/menu-list'
 
 export default {
  demo,
- routerTab
+ routerTab,
+ menuList
 }

src/store/modules/menu-list.js

@@ -0,0 +1,53 @@
+import { MENU_LIST } from '../mutations'
+
+const state = {
+ list: [
+ { moduleName: '学校管理', menuList: []},
+ { moduleName: '教务管理', menuList: [
+ { index: '1', label: '学生管理', children: [
+ { index: '1-1', label: '学生信息', name: 'demoList', path: '/demo/list' }, // 注意：必须与路由router的name、path对应
+ { index: '1-2', label: 'test', children: [
+ { index: '1-2-1', label: 'test_1', name: 'test_1', path: '/demo/test_1' }
+ ]}]
+ }
+ ]},
+ { moduleName: '教职工管理', menuList: [
+ { index: '1', label: '学生管理', children: [
+ { index: '1-1', label: 'test_2', name: 'test_2', path: '/demo/test_2' }]
+ }
+ ]},
+ { moduleName: '行政办公', menuList: []},
+ ],
+ activeModuleName: '',
+ activeMenuIndex: '-1'
+
+}
+
+const getters = {
+ // 模块名数组
+ modules: () => {
+ return state.list.map(item => item.moduleName)
+ },
+ // 获取相应模块下的菜单列表
+ menuList: () => {
+ let current = state.list.filter(item => item.moduleName === state.activeModuleName);
+ return current.length ? current[0].menuList : [];
+ },
+}
+
+const mutations = {
+ // 设置当前的模块名
+ [MENU_LIST.SET_ACTICE_MODULE_NAME] (state, moduleName) {
+ state.activeModuleName = moduleName;
+ },
+ // 设置当前菜单的index
+ [MENU_LIST.SET_ACTICE_MENU_INDEX] (state, menuIndex) {
+ state.activeMenuIndex = menuIndex;
+ },
+ }
+
+export default {
+ state,
+ getters,
+ mutations
+}

src/store/modules/router-tab.js

@@ -7,11 +7,11 @@ const state = {
 
 const mutations = {
  // 添加tabs
- [ROUTER_TAB.ADD] (state, data) {
+ [ROUTER_TAB.ROUTER_ADD] (state, data) {
  state.openTab.push(data);
  },
  // 删除tabs
- [ROUTER_TAB.DELETE] (state, path) {
+ [ROUTER_TAB.ROUTER_DELETE] (state, path) {
  let index = 0;
  for (let option of state.openTab) {
  if (option.path === path) {
@@ -22,11 +22,11 @@ const mutations = {
  state.openTab.splice(index, 1);
  },
  // 清空tabs
- [ROUTER_TAB.CLEAR] (state) {
+ [ROUTER_TAB.ROUTER_CLEAR] (state) {
  state.openTab = [];
  },
  // 设置当前激活的tab
- [ROUTER_TAB.SET_ACTICE_INDEX] (state, index) {
+ [ROUTER_TAB.SET_ACTICE_ROUTER_INDEX] (state, index) {
  state.activeIndex = index;
  },
 }

src/store/mutations.js

@@ -3,8 +3,14 @@ export const DEMO = {
 }
 
 export const ROUTER_TAB = {
- ADD: 'add',
- DELETE: 'delete',
- CLEAR: 'clear',
- SET_ACTICE_INDEX: 'set_active_index',
+ ROUTER_ADD: 'router_add',
+ ROUTER_DELETE: 'router_delete',
+ ROUTER_CLEAR: 'router_clear',
+ SET_ACTICE_ROUTER_INDEX: 'set_active_router_index',
 }
+
+export const MENU_LIST = {
+ SET_ACTICE_MODULE_NAME: 'set_active_module_name',
+ SET_ACTICE_MENU_INDEX: 'set_active_menu_index',
+}
+

src/views/common/container.vue

@@ -17,7 +17,7 @@
  </div>
 </template>
 <script>
-import { routerTab } from "../../components";
+import routerTab from "./router-tab";
 import navigationBar from './navigationBar'
 import menuAside from './menuAside'
 export default {

src/views/common/login.vue

@@ -29,6 +29,7 @@
  </div>
 </template>
 <script>
+import { MENU_LIST } from "../../store/mutations.js";
 export default {
  data () {
  return {