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.
68 lines
2.0 KiB
68 lines
2.0 KiB
<template>
|
|
<el-menu-item v-if="!hasChildren" :index="props.menuItem.name" :route="{ name: props.menuItem.name }">
|
|
<el-icon :name="props.menuItem.meta.icon" size="20" />
|
|
<p>{{ props.menuItem.meta.title }}</p>
|
|
</el-menu-item>
|
|
<el-sub-menu v-else :index="props.menuItem.name">
|
|
<template #title>
|
|
<el-icon :name="props.menuItem.meta.icon" size="20" />
|
|
<p>{{ props.menuItem.meta.title }}</p>
|
|
</template>
|
|
<MenuItem v-for="(item, index) in menuItem.children" :key="index" :menu-item="item" />
|
|
</el-sub-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
menuItem: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
const hasChildren = computed(
|
|
() => (props.menuItem.children || []).filter((item) => item.meta.hidden !== true).length > 0
|
|
);
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.x-icon {
|
|
width: @layout-icon;
|
|
color: @layout-menu-ic;
|
|
}
|
|
.el-menu-item {
|
|
width: 100%;
|
|
min-width: unset;
|
|
border-radius: @layout-border-radius;
|
|
&:hover {
|
|
color: @layout-menu-hover-fc;
|
|
}
|
|
&.is-active {
|
|
background-color: @layout-menu-active-bgc;
|
|
color: @layout-menu-active-fc;
|
|
}
|
|
+ .el-menu-item {
|
|
margin-top: @layout-space-small;
|
|
}
|
|
}
|
|
.el-sub-menu {
|
|
border-radius: @layout-border-radius;
|
|
&.is-opened {
|
|
background-color: @color-ghost-black;
|
|
> :deep(.el-sub-menu__title) {
|
|
background-color: @layout-menu-hover-bgc;
|
|
}
|
|
}
|
|
:deep(.el-sub-menu__title) {
|
|
border-radius: @layout-border-radius;
|
|
margin-bottom: @layout-space-small;
|
|
}
|
|
+ .el-menu-item {
|
|
margin-top: @layout-space-small;
|
|
}
|
|
:deep(.el-menu) {
|
|
padding: 0 !important;
|
|
border-radius: @layout-border-radius;
|
|
}
|
|
}
|
|
</style>
|