必要环境为 vue + vue-router +element
此文件只是左侧菜单组件，需要更多功能请参考element-ui 官网的 NavMenu 导航菜单
image.png
image.png
LeftAsideNav.vue 文件
<template>
<div class="ku-aside-assembly">
<div class="ku-menu-lsit">
<el-menu
:default-active="NavigationDefaultActive"
router
background-color="#02012b"
text-color="#fff"
active-text-color="#407ce7">
<template v-for="(item,index) in menuList">
<!--判断是否有二级-->
<template v-if="item.submenuLsit.length>0">
<el-submenu :index="index.toString()">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.title}}</span>
</template>
<el-menu-item-group>
<template v-for="(item2,index2) in item.submenuLsit">
<!--判断是否有第三级-->
<template v-if="item2.submenuLsit.length > 0">
<el-submenu :index="[index +'-'+ index2].toString()">
<template slot="title">{{item2.title}}</template>
<el-menu-item :index="item3.path" v-for="(item3,index3) in item2.submenuLsit">{{item3.title}}
</el-menu-item>
</el-submenu>
</template>
<el-menu-item v-else :index="item2.path">
{{item2.title}}
</el-menu-item>
</template>
</el-menu-item-group>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.path">
<i class="el-icon-menu"></i>
<span slot="title">{{item.title}}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</div>
</template>
<script>
// import Vue from 'vue'
export default {
name: 'LeftAsideNav',
data() {
return {
NavigationDefaultActive: "", // 导航默认当前选择
// 菜单列表
menuList: [
{
title: '第一层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "",
submenuLsit: [
{
title: '第二层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "",
submenuLsit: [
{
title: '第三层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList1",
},
{
title: '第三层2',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList2",
},
{
title: '第三层3',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList3",
}
]
},
{
title: '第二层2',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "",
submenuLsit: [
{
title: '第三层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList4",
},
{
title: '第三层2',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList5",
},
{
title: '第三层3',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList6",
}
]
}
]
},
{
title: '第一层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "",
submenuLsit: [
{
title: '第二层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "tesss",
submenuLsit: []
},
{
title: '第二层2',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "",
submenuLsit: [
{
title: '第三层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList7",
},
{
title: '第三层2',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList8",
},
{
title: '第三层3',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList9",
}
]
}
]
},
{
title: '第一层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "TemplateList",
submenuLsit: []
},
{
title: '第一层1',
icon: 'el-icon-menu',
imgIconUrl: require('@/assets/icon/icon_project.png'),
path: "ProjectOverview",
submenuLsit: []
},
],
}
},
// 引入组件
components: {},
// 页面加载方法
mounted() {
this.getRouterParmes();
},
// 方法集合
methods: {
// 获取默认选项路由 vue-router 的
getRouterParmes: function () {
let _that = this;
// 获取路由需要延时获取
setTimeout(function () {
_that.NavigationDefaultActive = _that.$router.history.current.name || _that.$router.history.current.path.split('/')[1];
}, 100)
},
}
}
</script>
<style scoped>
</style>
element-ui css文件重置 sass 文件
// 左侧导航 start
.ku-aside-assembly{width: 215px;height: 100%;;background-color: $dark-blue-color;position: absolute;z-index: 3;overflow: auto;padding-left: 15px;
.ku-menu-lsit{
.el-menu{border-right: 0px;
.el-submenu {margin-bottom: 2px;
.el-icon-location{color: $color-white!important;}
.el-submenu__title{height: 40px;line-height: 40px;margin-top: 2px;
i.el-submenu__icon-arrow{color: $color-white;font-size: 14px;font-weight: bold;}
&:hover{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
}
.el-menu-item{
&.is-active{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
}
.el-menu{
.el-menu-item-group{
.el-menu-item-group__title{display: none;
}
}
.el-menu{
.el-menu-item{padding-left: 55px!important;
&.is-active,&:hover{background-color: $dark-blue-color!important;background-image:none;color: $blue-color!important;}
}
}
}
}
.el-menu-item{height: 40px;line-height: 40px;padding-right: 10px;margin-top: 2px;
&.is-active{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
i{color: $color-white;}
&:hover{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
& + .el-menu-item{margin-top: 2px;}
}
>.el-submenu>.el-submenu__title{padding-left: 5px!important;}
>.el-menu-item{padding-left: 5px!important;}
}
}
}
// 左侧导航 end
网友评论