1.组件:??huihuiItem.vue
<!--
-->
<template>
<div class="box">
<!-- 系统首页-->
<el-menu-item :index="item.menuPath" v-if="item.menuType===1">
<i :class="item.menuIcon"></i>
<span slot="title">{{ item.menuTitle }}</span>
</el-menu-item>
<!-- 商品相关-->
<el-submenu :index="item.menuPath" v-if="item.menuType===0">
<template slot="title">
<i :class="item.menuIcon"></i>
<span slot="title">{{ item.menuTitle }}</span>
</template>
<huihui-item v-for="(item,index) in item.children" :key="index" :item="item"/>
</el-submenu>
</div>
</template>
<script>
export default {
name: "huihuiItem",
props: ['item']
}
</script>
<style scoped>
</style>2. 动态菜单使用: 主 index.vue
<template>
<!--主页-->
<div class="main-wrapper">
<el-container>
<!-- 侧边栏-->
<el-aside width="200px">
<!-- logo部分-->
<div class="aside-log-wrapper">
<img src="@/assets/photo.png" alt=""/>
<span>瞎写CRM系统</span>
</div>
<!-- 菜单部分-->
<!-- 设置滚动条-->
<el-scrollbar>
<el-menu default-active="2" class="aside-menu-wrapper" router>
<!-- 使用自定义组件 实现动态菜单功能-->
<huihui-item v-for="(item,index) in menuList" :key="index" :item="item"/>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<!-- 头-->
<el-header><h3>瞎写CRM系统-不是认真的!</h3>
</el-header>
<!-- 主体-->
<el-main>
<div class="main-box">
<router-view/>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
//import auth from "@/utils/auth";
import huihuiItem from "@/components/huihuiItem";
export default {
name: "index",
components: {huihuiItem},
created() {
//this.menuList = auth.getMenuList();
this.menuList = JSON.parse(localStorage.getItem("menuList"));
},
data() {
return {
menuList: [],
}
},
methods: {}
}
</script>
<style scoped lang="scss">
/*设置满屏*/
.main-wrapper {
width: 100%;
height: 100%;
}
/*头部*/
.el-header {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
/*侧边栏*/
.el-aside {
background-color: #ffffff;
color: #333;
/*logo*/
.aside-log-wrapper {
text-align: center;
background-color: #4c8df3;
line-height: 60px;
/*去除logo和头部不对齐*/
height: 60px;
img {
width: 50px;
height: 50px;
border-radius: 50%;
/*居中对齐*/
vertical-align: middle;
margin-right: 8px;
}
span {
font-weight: 600;
font-family: 华文楷体, serif;
}
}
/*导航栏*/
.aside-menu-wrapper {
font-family: 微软雅黑, serif;
}
.el-scrollbar {
height: calc(100% - 60px);
}
}
/*主体*/
.el-main {
background-color: #E9EEF3;
color: #333;
padding: 5px 0 0 5px;
.main-box {
width: 100%;
height: 100%;
background-color: #fff;
padding: 15px 0 0 15px;
/*清除主体下面滚动条*/
box-sizing: border-box;
}
}
.el-container {
height: 100%;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>?
?
cs