<template> <el-row class="el-menu" > <el-menu router :default-active='$route.path' @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-menu-item index="/" class="main-logo"> <img src="../../static/img/sfa_logo.png" > </el-menu-item> <template v-for="(item , index) in $router.options.routes" v-if="item.meta.menuShow" > <template v-if="index==1" > <el-menu-item :index="item.path" :disabled='ListenChange' > <i :class="item.meta.ClassName"></i> <span slot="title" >{{item.meta.menuName}}</span> </el-menu-item> </template> <template v-else="index!=1"> <el-menu-item :index="item.path" > <i :class="item.meta.ClassName"></i> <span slot="title" >{{item.meta.menuName}}</span> </el-menu-item> </template> </template> </el-menu> </el-row> </template> <script> export default { name: 'MenuItemGroup', computed: { // //计算属性动态获取值 // //************************************************************* ListenChange() { return this.$store.getters.ShowUserDisabled }, // //************************************************************* }, watch:{ //监测属性动态检测值 //************************************************************* 'ListenChange':{ handler:function (val, oldVal) { }, deep:true, }, //************************************************************* }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, }, data() { return { } }, components: {}, } </script> <style scoped> .el-menu{ -webkit-transition: width 0.28s; transition: width 0.28s; width: 180px !important; height: 100%; position: fixed; font-size: 0px; top: 0; bottom: 0; left: 0; z-index: 1001; overflow: hidden; } .main-logo > img{ width: 163px; height: 47px; padding: 0 20px; margin-left: -30px; } </style>
import Vue from 'vue' import Router from 'vue-router' import LineSwitch from '@/views/Switch/LineSwitch' import Log from '@/views/Log/Log' import ManualSwitching from '@/views/ManualSwitching/ManualSwitching' import OperatorManagement from '@/views/OperatorManagement/OperatorManagement' import CoreSwitchManagement from '@/views/CoreSwitchManagement/CoreSwitchManagement' import UserManagementofNetworkEquipment from '@/views/UserManagementofNetworkEquipment/UserManagementofNetworkEquipment' import AboutUS from '@/views/AboutUS/AboutUS' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'LS', component: LineSwitch, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '线路切换', // 导航栏中显示的名称 ClassName:'el-icon-extendedicon-' //导航栏中显示的图标 }, }, { path:'/ManualSwitching', name:'ManualSwitching', component:ManualSwitching, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '手动切换', // 导航栏中显示的名称 ClassName:'el-icon-extendedbackup-hm' //导航栏中显示的图标 }, },{ path:'/OperatorManagement', name:'OperatorManagement', component:OperatorManagement, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '运营商管理', // 导航栏中显示的名称 ClassName:'el-icon-extendedjizhanxinhao' //导航栏中显示的图标 }, },{ path:'/UserManagementofNetworkEquipment', name:'UserManagementofNetworkEquipment', component:UserManagementofNetworkEquipment, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '网络设备用户管理', // 导航栏中显示的名称 ClassName:'el-icon-extendedquanxianguanli' //导航栏中显示的图标 }, },{ path:'/CoreSwitchManagement', name:'CoreSwitchManagement', component:CoreSwitchManagement, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '核心交换机管理', // 导航栏中显示的名称 ClassName:'el-icon-extendedhexinjiaohuanji' //导航栏中显示的图标 }, },{ path:'/SwitchLogfile', name:'Log', component:Log, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '切换日志', // 导航栏中显示的名称 ClassName:'el-icon-extendedrizhi' //导航栏中显示的图标 }, },{ path:'/AboutUS', name:'AboutUS', component:AboutUS, meta: { menuShow: true, // 是否在导航栏中显示 menuName: '关于我们', // 导航栏中显示的名称 ClassName:'el-icon-extendedicon-test' //导航栏中显示的图标 }, } ] })
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={//要设置的全局访问的state对象 UserInfo:{ user_name:'', user_account:'000', disabled:'' }, //要设置的初始属性值 }; const getters = { ShowUserName(state){ return state.UserInfo.user_name }, ShowUserAccount(state){ return state.UserInfo.user_account }, ShowUserDisabled(state){ return state.UserInfo.disabled }, }; const mutations = { SetUserAccount(state,user_account){ state.UserInfo.user_account=user_account; }, SetUserName(state,user_name) { state.UserInfo.user_name = user_name; }, SetUserDisabledFalse(state) { state.UserInfo.disabled = false; }, SetUserDisabledTrue(state) { state.UserInfo.disabled = true; } }; const store = new Vuex.Store({ state, getters, mutations }); export default store;
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '../static/icons/iconfont.css' //********************************************************************************* // // axios 设置 import axiosAPI from '@/api/axios.js' Vue.use(axiosAPI) //********************************************************************************* Vue.use(ElementUI); Vue.config.productionTip = false; /* eslint-disable no-new */ import store from './store/index.js' new Vue({ el: '#app', store, router, components: {App}, template: '<App/>', created() { this.GetUserInfo() }, methods: { //获取用户信息 判断是否有手动切换的权限 //****************************************************************************************************** GetUserInfo() { this.getuserinfo({}) .then(response => { let bk_username=response.data.bk_username; if ( bk_username && ( bk_username == '01379233' || bk_username=='01377338' ||bk_username== '338440')){ this.$store.commit('SetUserDisabledFalse'); }else{ this.$store.commit('SetUserDisabledTrue'); } this.$store.commit('SetUserName', response.data.chname); this.$store.commit('SetUserAccount', response.data.bk_username); // console.log(this.$store.getters.ShowUserAccount) }) .catch(error => { }); } //****************************************************************************************************** } });
参考文章