admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: simplify sidebar css

Browse Source
This commit is contained in:
pany 2024-02-28 17:04:25 +08:00
parent d8ab55fe2a
commit c6225b3cf7
2 changed files with 25 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/layouts/components/Sidebar/SidebarItem.vue
View File

@ -7,16 +7,12 @@ import path from "path-browserify"
interface Props { interface Props {
item: RouteRecordRaw item: RouteRecordRaw
isCollapse?: boolean
isTop?: boolean isTop?: boolean
isFirstLevel?: boolean
basePath?: string basePath?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
isCollapse: false,
isTop: false, isTop: false,
isFirstLevel: true,
basePath: "" basePath: ""
}) })
@ -60,36 +56,32 @@ const resolvePath = (routePath: string) => {
</script> </script>
<template> <template>
<div :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }"> <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
<template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children"> <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
<SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)"> <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
<el-menu-item :index="resolvePath(theOnlyOneChild.path)"> <SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
<SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" /> <component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
<component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" /> <template v-if="theOnlyOneChild.meta.title" #title>
<template v-if="theOnlyOneChild.meta.title" #title> {{ theOnlyOneChild.meta.title }}
{{ theOnlyOneChild.meta.title }} </template>
</template> </el-menu-item>
</el-menu-item> </SidebarItemLink>
</SidebarItemLink> </template>
<el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
<template #title>
<SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" />
<component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
<span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span>
</template> </template>
<el-sub-menu v-else :index="resolvePath(props.item.path)" teleported> <template v-if="props.item.children">
<template #title> <SidebarItem
<SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" /> v-for="child in showingChildren"
<component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" /> :key="child.path"
<span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span> :item="child"
</template> :base-path="resolvePath(child.path)"
<template v-if="props.item.children"> />
<SidebarItem </template>
v-for="child in showingChildren" </el-sub-menu>
:key="child.path"
:item="child"
:is-collapse="props.isCollapse"
:is-first-level="false"
:base-path="resolvePath(child.path)"
/>
</template>
</el-sub-menu>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -104,17 +96,4 @@ const resolvePath = (routePath: string) => {
margin-right: 12px; margin-right: 12px;
font-size: 18px; font-size: 18px;
} }
.simple-mode {
&.first-level {
:deep(.el-sub-menu) {
.el-sub-menu__icon-arrow {
display: none;
}
span {
visibility: hidden;
}
}
}
}
</style> </style>

1
src/layouts/components/Sidebar/index.vue
View File

@ -68,7 +68,6 @@ const hiddenScrollbarVerticalBar = computed(() => {
:key="route.path" :key="route.path"
:item="route" :item="route"
:base-path="route.path" :base-path="route.path"
:is-collapse="isCollapse"
:is-top="isTop" :is-top="isTop"
/> />
</el-menu> </el-menu>