77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<template>
|
|
<template v-for="item in props.menu" :key="item.key">
|
|
<template v-if="isShow(item)">
|
|
<!-- 一级菜单 -->
|
|
<el-menu-item :index="item.url" v-if="!hasChildren(item)">
|
|
<template #title>
|
|
<template v-if="props.showIcon && item.icon">
|
|
<el-icon style="color: white">
|
|
<component :is="item.icon"></component>
|
|
</el-icon>
|
|
</template>
|
|
<span style="color: white">{{ item.name }}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
<!-- 二级菜单 -->
|
|
<el-sub-menu :index="item.url" v-else>
|
|
<template #title>
|
|
<template v-if="props.showIcon && item.icon">
|
|
<el-icon style="color: white">
|
|
<component :is="item.icon"></component>
|
|
</el-icon>
|
|
</template>
|
|
<span style="color: white">{{ item.name }}</span>
|
|
</template>
|
|
<Menu :menu="item.children" :showIcon="false"></Menu>
|
|
</el-sub-menu>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
const props = defineProps({
|
|
menu: Object,
|
|
showIcon: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
const hasChildren = ({ children }) => {
|
|
return Array.isArray(children) && children.length;
|
|
};
|
|
|
|
const isShow = ({ show }) => {
|
|
return show === 1;
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 菜单栏背景 */
|
|
.el-menu-item {
|
|
background-color: #2b333e !important;
|
|
}
|
|
/* 一级菜单移入移出 */
|
|
.el-menu-item:hover {
|
|
background-color: none !important;
|
|
}
|
|
/* 二级菜单移入移出 */
|
|
.el-sub-menu:hover {
|
|
background-color: none !important;
|
|
}
|
|
|
|
/* 二级菜单2移入移出 */
|
|
.el-sub-menu__title:hover {
|
|
background-color: rgba(0,0,0,0) !important;
|
|
}
|
|
|
|
/* 选中背景颜色 */
|
|
.el-menu-item.is-active {
|
|
background-color: #ed1f65 !important;
|
|
}
|
|
|
|
/* 二级菜单开展箭头图标 */
|
|
.el-sub-menu__icon-arrow>svg{
|
|
color:white;
|
|
}
|
|
</style>
|