<template>
|
<div class="menu-item-wrapper">
|
<!-- 没有子菜单只有一级菜单 -->
|
<template v-if="!item.children || item.children.length === 0">
|
<el-menu-item :index="item.url">
|
<!-- <component v-if="item.icon != ''" :is="item.icon" class="icon-size" /> -->
|
<svg-icon
|
v-if="item.icon != ''"
|
:name="item.icon || ''"
|
color="#007CEE"
|
size="20"
|
class="ico"
|
></svg-icon>
|
<template #title>
|
{{ item.name }}
|
</template>
|
</el-menu-item>
|
</template>
|
<el-sub-menu v-else :index="item.id">
|
<template #title>
|
<!-- <component v-if="item.icon != ''" :is="item.icon" class="icon-size" /> -->
|
<div class="icon-size" :class="{ 'only-icon': isCollapse }">
|
<svg-icon
|
v-if="item.icon != ''"
|
:name="item.icon || ''"
|
color="#007CEE"
|
size="20"
|
></svg-icon>
|
</div>
|
<span :class="{ 'txt-hidden': isCollapse }">{{ item.name }}</span>
|
</template>
|
<sidebar-item
|
v-for="child in item.children"
|
:item="child"
|
:key="child.id"
|
></sidebar-item>
|
</el-sub-menu>
|
</div>
|
</template>
|
|
<script lang="ts">
|
export default {
|
name: 'SidebarItem',
|
}
|
</script>
|
|
<script setup lang="ts">
|
|
import { isExternal } from '@/utils/common'
|
import { useMenu } from '@/stores/modules/menu';
|
const menuStore = useMenu();
|
|
const props = defineProps({
|
item: {
|
type: Object,
|
required: true,
|
},
|
})
|
const isCollapse = computed((): boolean => menuStore.isCollapse);
|
|
</script>
|
|
<style scoped lang="scss">
|
.icon-size {
|
width: 28px;
|
padding-right: 5px;
|
}
|
.svg-icon {
|
margin-right: 5px;
|
}
|
// .submenu-title-noDropdown {
|
:deep(.el-sub-menu__title) {
|
font-size: 15px;
|
}
|
:deep(.el-menu-item) {
|
font-size: 15px;
|
}
|
|
.menu-item-wrapper {
|
}
|
.only-icon {
|
width: 40px;
|
position: absolute;
|
width: 28px;
|
left: 18px;
|
}
|
.txt-hidden{
|
width: 0;
|
height: 0;
|
overflow: hidden;
|
}
|
.txt-hidden + :deep(.el-sub-menu__icon-arrow){
|
display: none;
|
}
|
</style>
|
