vue中，动态菜单-NavMenu导航菜单——el-menu动态导航菜单(二)
卞轶
vue中，动态菜单-NavMenu导航菜单——el-menu动态导航菜单(二)
4、动态菜单文件
src\components\console\sideBar.vue
<template>
<div class="sideBar">
<el-menu class="el-menu-vertical-demo" background-color="#242731" text-color="#D6D6D6" active-text-color='#A1DBF5'
:default-active=curRoute :collapse="isCollapse">
<template v-for="(pItem, pIndex) in menuLists">
<el-submenu v-if="!pItem.url" :index="pIndex + ''" :key="pIndex">
<template slot="title">
<i :class="pItem.icon"></i>
<span>{{ pItem.menuName }}</span>
</template>
<el-menu-item :index="child.url" v-for="(child, cIndex) in pItem.childMenuList" :key="cIndex"
@click="enterOperate(child.url, child.menuId)" style="padding-left: 55px;">
{{ child.menuName }}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="pIndex + ''" :key="pIndex" @click="enterOperate(pItem.url, pItem.menuId)">
<template slot="title">
<i :class="pItem.icon" style="color: #ffffff;"></i>
<span>{{ pItem.menuName }}</span>
</template>
</el-menu-item>
</template>
<el-menu-item @click="enterOperate('/console/environmentalStat', 22222)">
<template slot="title">
<i class="el-icon-s-marketing" style="color: #ffffff;"></i>
<span>数据统计</span>
</template>
</el-menu-item>
</el-menu>
</div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
data() {
return {
curRoute: '0',
menuLists: []
};
},
computed: mapState({
isCollapse: function (state) {
return state.menuIsCollapse
}
}),
methods: {
enterOperate(moduleRoute, menuId) {
this.$store.commit('setMenuId', menuId)
this.$router.push({ path: moduleRoute, query: { menuId: menuId } });
}
},
mounted() {
this.menuLists = [{
childMenuList: [],
icon: "el-icon-menu",
isMainMenu: null,
menuId: 28,
menuName: "应用管理",
parentId: null,
seq: null,
url: "/console/appCenter"
}, {
childMenuList: [{
childMenuList: null,
icon: null,
isMainMenu: null,
menuId: 34,
menuName: "产品列表",
parentId: null,
seq: null,
url: "/console/dataProduct"
}, {
childMenuList: null,
icon: null,
isMainMenu: null,
menuId: 35,
menuName: "图层管理",
parentId: null,
seq: null,
url: "/console/dataProductLayerList",
}
],
icon: "el-icon-document-checked",
isMainMenu: null,
menuId: 29,
menuName: "数据产品",
parentId: null,
seq: null,
url: null
}];
// this.menuLists = this.$store.state.menuList;
console.log(this.menuLists, '888888888888');
}
}
</script>
<style lang="scss" scoped>
.sideBar {
margin-top: 64px;
float: left;
height: 100%;
max-height: calc(100% - 64px);
overflow-y: scroll;
}
.sideBar::-webkit-scrollbar {
display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 202px;
height: 100%;
border: none;
}
.el-submenu__title>i:before {
color: #ffffff;
}
.el-menu {
height: 100%;
}
.el-menu-item.is-active {
background-color: #0A0C1F !important;
}
</style>
5、主页面
src\components\console\pagesView.vue
<template>
<div style="height: 100%">
<console-header></console-header>
<side-bar></side-bar>
<div style="height: 100%;overflow: hidden;">
<router-view></router-view>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue';
import consoleHeader from './consoleHeader.vue';
import sideBar from './sideBar.vue';
export default {
name: 'pagesView',
components:{
consoleHeader,
sideBar
},
computed: {
collapse() {
return this.$store.state.menuIsCollapse;
}
},
data(){
return{
quickMenuShow: false,
quickMenuList: []
}
},
methods:{
}
};
</script>
<style lang="scss" scoped>
.fixedMenu {
position: absolute;
left: 90%;
top: 80px;
font-size: 12px;
z-index: 99;
.quickMenu {
border: 1px solid #2D4EFF;
line-height: 35px;
padding: 0px 12px;
box-shadow: 0 2px 12px 0 #88B1FF;
border-radius: 4px;
cursor: pointer;
color: #2D4EFF;
display: inline-block;
}
.quickSecondMenu {
position: absolute;
left: 0px;
top: 37px;
width: 100%;
line-height: 30px;
padding-left: 5px;
z-index: 9;
display: none;
color: #2D4EFF;
cursor: pointer;
background-color:#ffffff;
div:hover {
color: #1095FF;
}
}
.highlightBack{
background-color: #2D4EFF;
color:#ffffff;
}
.changeShow{
display: block;
}
}
</style>
6、标头模块
src\components\console\consoleHeader.vue
<template>
<div class="header clear" style="background-color: #060714">
<div class="clear" style="width: 95%;margin: 0px auto;">
<!-- 折叠按钮 -->
<span class="collapse-btn fl" @click="collapseChange" style="margin-right: 20px;">
<i v-if="!collapse" class="el-icon-s-fold" style="color: #FFFFFF;"></i>
<i v-else class="el-icon-s-unfold" style="color: #FFFFFF;"></i>
</span>
<a class="fl" href="/">
<img src="@/img/UC_logo.svg" class="imgMiddle" />
</a>
<ul class="fr menu" style="position: relative;">
<li class="menuItem" v-if="$store.state.userInfo">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<div class="avatar-img">
<img class="user-avatar" :src="avatarImg">
<i class="el-icon-caret-bottom"></i>
<span class="avatar-hello">{{$store.state.userInfo.userName}}</span>
</div>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<el-dropdown-item>
<span @click="toAccountCenter" style="display:block;">账号中心</span>
</el-dropdown-item>
<el-dropdown-item>
<span @click="logout" style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
</ul>
</div>
</div>
</template>
<script type='text/ecmascript-6'>
import Vue from 'vue';
import { mapState } from 'vuex';
import avatarImg from '@/img/Avatar@2x.png';
export default {
name: 'navbar',
data() {
return {
curSecondMenu: null,
isActive: null,
avatarImg: avatarImg
}
},
computed: mapState({
collapse: (state) => state.menuIsCollapse
}),
methods:{
collapseChange: function () {
this.$store.commit('changeCollapse');
},
logout: function () {
this.$router.push('/login');
// 退出登录清空token和用户信息
sessionStorage.removeItem('userInfo');
sessionStorage.removeItem('token');
this.$store.commit('SAVE_USERINFO', '');
this.$store.commit('SAVE_TOKEN', '');
},
toAccountCenter: function () {
this.$router.push('/console/account');
}
}
}
</script>
<style lang="scss" scoped>
.imgMiddle{
width: 140px;
height: 35px;
}
.header{
position: fixed;
top: 0px;
width: 100%;
z-index: 3;
font-size: 18px;
height: 64px;
line-height: 64px;
.menu .menuItem{
display: inline-block;
color: #ffffff;
padding: 0px 20px;
position: relative;
&:hover >.secondMenu{
visibility: visible;
}
}
}
.menuItem .activeLine {
position: absolute;
width: 24px;
height: 2px;
background-color: #ffcc70;
left: 50%;
bottom: 0px;
transform:translateX(-50%);
border-radius: 1px;
}
.secondMenu{
visibility: hidden;
width: 792px;
height: 240px;
position: absolute;
background-color: #040449;
font-size: 12px;
left: -50px;
color: #ffffff;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
ul{
padding-left: 20px;
width: 264px;
&:hover{
background-color: #4b39ef;
cursor: pointer;
}
li{
line-height: 20px;
}
}
}
.activeTitle{
display:inline-block;
transition: all 0.5s;
transform: scale(1.4);
cursor: pointer;
color: #ffcc70;
}
.avatar-hello {
font-size: 16px;
color: #ffffff;
margin-left: 20px;
}
.avatar-container {
.avatar-wrapper {
cursor: pointer;
position: relative;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
vertical-align: middle;
}
.el-icon-caret-bottom {
position: absolute;
top: 35px;
font-size: 12px;
}
}
}
</style>
类似资料：