github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 11:34:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化侧边栏导航图标展示样式

Browse Source
This commit is contained in:
hooray
2021-12-11 10:17:12 +08:00
parent 0f9c5e2c56
commit 628276ccb7
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/SidebarItem/index.vue
+10 -8
View File
@@ -2,7 +2,7 @@
<div v-if="item.meta.sidebar !== false" class="sidebar-item">
<el-sub-menu v-if="item.path == undefined" :title="item.meta.title" :index="JSON.stringify(item)">
<template #title>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<span class="title">{{ item.meta.title }}</span>
</template>
<SidebarItem v-for="route in item.children" :key="route.path" :item="route" />
@@ -10,14 +10,14 @@
<router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
<a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
<el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<span class="title">{{ item.meta.title }}</span>
</el-menu-item>
</a>
</router-link>
<el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
<template #title>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<span class="title">{{ item.meta.title }}</span>
</template>
<SidebarItem v-for="route in item.children" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path)" />
@@ -69,10 +69,9 @@ const hasChildren = computed(() => {
}
:deep(.el-sub-menu),
:deep(.el-menu-item) {
.icon {
.svg-icon {
width: 20px;
font-size: 20px;
margin-right: 10px;
vertical-align: -0.25em;
transition: transform 0.3s;
color: unset;
@@ -81,13 +80,16 @@ const hasChildren = computed(() => {
vertical-align: middle;
}
}
&:hover > .icon,
.el-sub-menu__title:hover > .icon {
.svg-icon + .title {
margin-left: 10px;
}
&:hover > .svg-icon,
.el-sub-menu__title:hover > .svg-icon {
transform: scale(1.2);
}
}
:deep(.el-sub-menu) {
> .el-sub-menu__title > .icon.active {
> .el-sub-menu__title > .svg-icon.active {
display: none;
}
}