wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-20 19:09:21 +08:00
Code Issues 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 {
item: RouteRecordRaw
isCollapse?: boolean
isTop?: boolean
isFirstLevel?: boolean
basePath?: string
}
const props = withDefaults(defineProps<Props>(), {
isCollapse: false,
isTop: false,
isFirstLevel: true,
basePath: ""
})
@ -60,36 +56,32 @@ const resolvePath = (routePath: string) => {
</script>
<template>
<div :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }">
<template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
<SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
<el-menu-item :index="resolvePath(theOnlyOneChild.path)">
<SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
<component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
<template v-if="theOnlyOneChild.meta.title" #title>
{{ theOnlyOneChild.meta.title }}
</template>
</el-menu-item>
</SidebarItemLink>
<template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
<SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
<el-menu-item :index="resolvePath(theOnlyOneChild.path)">
<SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
<component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
<template v-if="theOnlyOneChild.meta.title" #title>
{{ theOnlyOneChild.meta.title }}
</template>
</el-menu-item>
</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>
<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 v-if="props.item.children">
<SidebarItem
v-for="child in showingChildren"
:key="child.path"
:item="child"
:is-collapse="props.isCollapse"
:is-first-level="false"
:base-path="resolvePath(child.path)"
/>
</template>
</el-sub-menu>
</div>
<template v-if="props.item.children">
<SidebarItem
v-for="child in showingChildren"
:key="child.path"
:item="child"
:base-path="resolvePath(child.path)"
/>
</template>
</el-sub-menu>
</template>
<style lang="scss" scoped>
@ -104,17 +96,4 @@ const resolvePath = (routePath: string) => {
margin-right: 12px;
font-size: 18px;
}
.simple-mode {
&.first-level {
:deep(.el-sub-menu) {
.el-sub-menu__icon-arrow {
display: none;
}
span {
visibility: hidden;
}
}
}
}
</style>

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

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