You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
3.5 KiB
158 lines
3.5 KiB
<template>
|
|
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" class="menuBox">
|
|
<template v-for="(item, index) in menuData">
|
|
<component :index="prefix + '_' + index" v-if="item.children" is="el-submenu" class="menuItem" :class="{ 'menuActive': activeIndex.includes(prefix + '_' + index) }">
|
|
<template slot="title">{{ item.title }}</template>
|
|
|
|
<!-- 第二层菜单 -->
|
|
<template v-for="(item1, index1) in item.children">
|
|
<component :index="prefix + '_' + index + '-' + index1" v-if="item1.children" is="el-submenu">
|
|
<template slot="title">
|
|
<p index="1">{{ item1.title }}</p>
|
|
</template>
|
|
|
|
<!-- 第三层菜单 -->
|
|
<template v-for="(item2, index2) in item1.children">
|
|
<component :index="prefix + '_' + index + '-' + index1 + '-' + index2" is="el-menu-item">{{
|
|
item2.title }}
|
|
</component>
|
|
</template>
|
|
|
|
</component>
|
|
<component :index="prefix + '_' + index + '-' + index1" v-else is="el-menu-item">{{ item1.title
|
|
}}
|
|
</component>
|
|
</template>
|
|
|
|
</component>
|
|
<component :index="prefix + '_' + index" v-else is="el-menu-item" class="menuItem"
|
|
:class="{ 'menuActive': activeIndex.includes(prefix + '_' + index) }">{{
|
|
item.title }}
|
|
</component>
|
|
</template>
|
|
</el-menu>
|
|
</template>
|
|
<script>
|
|
/**
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
name: "CustomMenu",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
props: {
|
|
prefix: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
activeIndex: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
menuData: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
activeMenu: {
|
|
type: Object,
|
|
default: () => { }
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
handleSelect(key, keyPath) {
|
|
let arr = (key.split("_")[1]).split("-");
|
|
let node = this.menuData
|
|
for (let i = 0; i < arr.length; i++) {
|
|
node = node[arr[i] * 1];
|
|
if (node.children) {
|
|
node = node.children;
|
|
}
|
|
}
|
|
this.$emit("onChange", node, key);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@mixin btnClass{
|
|
transition: none;
|
|
width: 110px;
|
|
height: 34px;
|
|
line-height: 32px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #fff;
|
|
padding: 0 !important;
|
|
}
|
|
@mixin activeBtnBg{
|
|
background: url("../../images/active.png") no-repeat 0 0 !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
.menuBox {
|
|
border: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
width: 25%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
}
|
|
|
|
.menuItem {
|
|
@include btnClass;
|
|
text-align: center;
|
|
background-size: 100% 100%;
|
|
::v-deep &.is-active {
|
|
border: none !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
::v-deep &:focus {
|
|
border: none !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
::v-deep .el-icon-arrow-down {
|
|
display: none !important;
|
|
}
|
|
|
|
::v-deep .el-submenu__title{
|
|
@include btnClass;
|
|
}
|
|
::v-deep .el-submenu__title:hover {
|
|
background: none !important;
|
|
}
|
|
|
|
&:hover {
|
|
@include activeBtnBg;
|
|
color: #fff !important;
|
|
border: none !important;
|
|
::v-deep .el-submenu__title{
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.menuActive {
|
|
@include activeBtnBg;
|
|
::v-deep .el-submenu__title{
|
|
color: #fff !important;
|
|
border:none !important;
|
|
}
|
|
}
|
|
::v-deep &:focus .el-submenu__title{
|
|
color: #fff !important;
|
|
border:none !important;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|