68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
|
<div v-if="!hasChildren">
|
|
<el-menu-item
|
|
:index="menuItem.menu_url"
|
|
:disabled="menuItem.disabled"
|
|
:class="{ 'menu-item': true }"
|
|
>
|
|
<el-icon v-if="menuItem.menu_grade === 1 && !isCollapse">
|
|
<Menu />
|
|
</el-icon>
|
|
<span>{{ menuItem.menu_name }}</span>
|
|
</el-menu-item>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<el-sub-menu
|
|
:index="menuItem.menu_url"
|
|
:disabled="menuItem.disabled"
|
|
>
|
|
<template #title>
|
|
<el-icon v-if="menuItem.menu_grade === 1 && !isCollapse">
|
|
<Menu />
|
|
</el-icon>
|
|
<span>{{ menuItem.menu_name }}</span>
|
|
</template>
|
|
|
|
<menu-item
|
|
v-for="child in menuItem.children"
|
|
:key="child.id"
|
|
:menu-item="child"
|
|
:is-collapse="isCollapse"
|
|
/>
|
|
</el-sub-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from 'vue';
|
|
import { Menu } from '@element-plus/icons-vue';
|
|
|
|
// 接收父组件传递的属性
|
|
const props = defineProps({
|
|
menuItem: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
isCollapse: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
// 判断是否有子菜单
|
|
const hasChildren = computed(() => {
|
|
return props.menuItem.children && props.menuItem.children.length > 0;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu-item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
</style>
|
|
|