90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<el-sub-menu v-if="hasChildren" :index="menu.path">
|
|
<template #title>
|
|
<el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
|
|
<component :is="menu.icon || menu.meta?.icon" />
|
|
</el-icon>
|
|
<span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
|
|
</template>
|
|
<sidebar-menu-item
|
|
v-for="child in menu.children"
|
|
:key="child.path"
|
|
:menu="child"
|
|
:level="level + 1"
|
|
/>
|
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="menu.path">
|
|
<el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
|
|
<component :is="menu.icon || menu.meta?.icon" />
|
|
</el-icon>
|
|
<template #title>
|
|
<span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import * as ElementPlusIcons from '@element-plus/icons-vue'
|
|
|
|
// 接收菜单项属性
|
|
const props = defineProps({
|
|
menu: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
level: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
})
|
|
|
|
// 判断是否有子菜单
|
|
const hasChildren = computed(() => {
|
|
return props.menu.children && props.menu.children.length > 0
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 菜单图标样式 */
|
|
.menu-icon {
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
transition: color 0.2s ease;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 菜单标题 */
|
|
.menu-title {
|
|
font-size: inherit;
|
|
letter-spacing: 0.2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 图标交互状态 */
|
|
.el-menu-item .menu-icon,
|
|
:deep(.el-sub-menu__title .menu-icon) {
|
|
color: #7f8c8d !important;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.el-menu-item:hover .menu-icon,
|
|
:deep(.el-sub-menu__title:hover .menu-icon) {
|
|
color: #34495e !important;
|
|
}
|
|
|
|
/* 激活菜单项图标 */
|
|
.el-menu-item.is-active .menu-icon {
|
|
color: #2c3e50 !important;
|
|
}
|
|
|
|
:deep(.el-sub-menu.is-opened > .el-sub-menu__title .menu-icon) {
|
|
color: #2c3e50 !important;
|
|
}
|
|
</style> |