模拟后端数据
const menu = [{
"menuId": 1,
"menuName": "管理系统",
"parentId": 0,
"route": null,
"type": 0,
"icon": "el-icon-setting",
"orderNum": 0,
"children": [{
"menuId": 2,
"menuName": "用户管理",
"parentId": 1,
"parentName": "系统管理",
"route": "/sys/dept",
"type": 1,
"icon": "el-icon-service",
"orderNum": 1,
"children": []
},
{
"menuId": 3,
"menuName": "菜单管理",
"parentId": 1,
"parentName": "系统管理",
"route": "/sys/user",
"type": 1,
"icon": "el-icon-news",
"orderNum": 2,
"children": []
}
]
},
{
"menuId": 4,
"menuName": "商户管理",
"parentId": 0,
"route": null,
"type": 0,
"icon": "el-icon-news",
"orderNum": 2,
"children": [
{
"menuId": 5,
"menuName": "个人管理",
"parentId": 4,
"parentName": "密码管理",
"route": null,
"type": 1,
"icon": "el-icon-news",
"orderNum": 1,
"children": [
{
"menuId": 6,
"menuName": "钱包管理",
"parentId": 5,
"parentName": "个人管理",
"route": "/sys/role",
"type": 2,
"icon": "el-icon-news",
"orderNum": 1,
"children": []
}]
},
{
"menuId": 7,
"menuName": "交易查询",
"parentId": 5,
"parentName": "密码管理",
"route": "/sys/menu",
"type": 1,
"icon": "el-icon-news",
"orderNum": 1,
"children": []
}]
}]
export default menuTreeData
导入我们模拟的后端数据 SS.JS
meus:data就行了
样式
/*菜单关闭*/
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
-webkit-transform: rotateZ(-90deg);
-ms-transform: rotate(-90deg);
transform: rotateZ(-90deg);
width:8px;
height:16px;
}
/*菜单展开*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
-webkit-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
transform: rotateZ(0deg);
width:8px;
height:16px;
}
.el-submenu .el-menu-item{
min-width: 180px !important;
}
.el-submenu__title{
height: 50px;
line-height: 50px;
}
.el-menu-item.is-active {
background:rgba(234,240,252,1)!important;
}
.el-submenu__title:hover{
color: #fff !important;
/* background:rgba(234,240,252,1)!important; */
}
.navMenu .el-menu-item:hover{
color: #fff !important
/* color: #fff; */
/* background:rgba(234,240,252,1)!important; */
}
.navMenu ul li{
text-align: center;
height: 40px!important;
line-height: 40px!important;
}
.navMenu ul li.el-menu-item.is-active{
background:#fff!important;
}
这里是z-Menu组件里面代码
这个fragment需要装插件
cnpm install --save vue-fragment 就行了
然后到main里面注入
import Fragment from ‘vue-fragment’
Vue.use(Fragment.Plugin)
<template>
<fragment>
<template v-for="menu in menus">
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.menuId + ''" :key="menu.menuId">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{menu.menuName}}</span>
</template>
<z-menu :menus="menu.children"></z-menu>
</el-submenu>
<el-menu-item v-else :index="menu.menuId + ''" @click="handleRouter(menu)" :key="menu.menuId">
<i :class="menu.icon"></i>
<span slot="title">{{menu.menuName}}</span>
</el-menu-item>
</template>
</fragment>
</template>
<script>
export default {
name: 'zMenu',
props: {
menus: {
type: Array,
default: function () {
return [];
},
required: false
}
},
methods: {
handleRouter(menu) {
// 跳转路由
this.$router.push(menu.route);
}
}
}
</script>
效果截图:
大功告成 我会后续后面的会分享源码给大家 方便大家使用 关注一下吧