83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-menu
|
|
:popper-append-to-body="true"
|
|
:default-active="$route.path"
|
|
class="el-menu-vertical-demo"
|
|
mode="horizontal"
|
|
:ellipsis="false"
|
|
router
|
|
active-text-color="#3da9fc"
|
|
background-color="#fff"
|
|
text-color="#000"
|
|
style="height: 80px; line-height: 80px;"
|
|
>
|
|
<!-- 遍历菜单 -->
|
|
<template v-for="item in items">
|
|
<!-- 含有子菜单 -->
|
|
<template v-if="item.children">
|
|
<!-- 第一层 含有子菜单菜单 -->
|
|
<el-submenu :index="item.path" :key="item.path">
|
|
<template slot="title">
|
|
<i :class="item.meta.icon"></i>
|
|
<span slot="title">{{ item.meta.title }}</span>
|
|
</template>
|
|
<menu-list :items="item.children"></menu-list
|
|
><!--递归调用-->
|
|
</el-submenu>
|
|
</template>
|
|
|
|
<!-- 第一层 不含子菜单 -->
|
|
<template v-else>
|
|
<el-menu-item :index="item.path" :key="item.path">
|
|
<i :class="item.meta.icon"></i>
|
|
<span slot="title">{{ item.meta.title }}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "MenuList",
|
|
props: {
|
|
items: Array,
|
|
isCollapse: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
activeIndex: this.$route.path,
|
|
};
|
|
},
|
|
methods: {
|
|
handleOpen(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
handleClose(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
border-bottom: 2px solid transparent;
|
|
color: #909399;
|
|
}
|
|
::v-deep.el-menu-item {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
}
|
|
::v-deep .el-submenu__title{
|
|
background-color: #fff !important;
|
|
}
|
|
::v-deep .el-menu.el-menu--horizontal {
|
|
border-bottom: 0;
|
|
}
|
|
</style>
|