test/vue-pure-admin2
1
0
Fork 0
mirror of https://gitee.com/yiming_chang/vue-pure-admin.git synced 2024-12-02 03:07:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: menu

Browse Source
This commit is contained in:
xiaoxian521 2022-04-25 14:39:39 +08:00
parent 7397c315a7
commit 0d4499c187
2 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/layout/components/sidebar/sidebarItem.vue
View File

@ -148,7 +148,7 @@ function resolvePath(routePath) {
:class="{ 'submenu-title-noDropdown': !isNest }" :class="{ 'submenu-title-noDropdown': !isNest }"
:style="getNoDropdownStyle" :style="getNoDropdownStyle"
> >
<div class="el-icon" v-show="props.item.meta.icon"> <div class="sub-menu-icon" v-show="props.item.meta.icon">
<component <component
:is=" :is="
useRenderIcon( useRenderIcon(
@ -216,10 +216,7 @@ function resolvePath(routePath) {
popper-append-to-body popper-append-to-body
> >
<template #title> <template #title>
<div <div v-show="props.item.meta.icon" class="sub-menu-icon">
v-show="props.item.meta.icon"
:class="['el-icon', props.item.meta.icon]"
>
<component <component
:is="useRenderIcon(props.item.meta && props.item.meta.icon)" :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
/> />

43
src/style/sidebar.scss
View File

@ -14,10 +14,19 @@
} }
} }
.sub-menu-icon {
vertical-align: middle;
margin-right: 5px;
font-size: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.main-container { .main-container {
height: 100vh; height: 100vh;
min-height: 100%; min-height: 100%;
transition: margin-left 0.28s; transition: margin-left 0.1s;
margin-left: $sideBarWidth; margin-left: $sideBarWidth;
position: relative; position: relative;
background: #f0f2f5; background: #f0f2f5;
@ -29,7 +38,7 @@
right: 0; right: 0;
z-index: 998; z-index: 998;
width: calc(100% - 210px); width: calc(100% - 210px);
transition: width 0.28s; transition: width 0.1s;
} }
.main-hidden { .main-hidden {
@ -49,7 +58,7 @@
} }
.sidebar-container { .sidebar-container {
transition: width 0.28s; transition: width 0.1s;
width: $sideBarWidth !important; width: $sideBarWidth !important;
background: $menuBg; background: $menuBg;
height: 100%; height: 100%;
@ -527,7 +536,7 @@
.mobile { .mobile {
.fixed-header { .fixed-header {
width: 100% !important; width: 100% !important;
transition: width 0.28s; transition: width 0.1s;
} }
.main-container { .main-container {
@ -535,7 +544,7 @@
} }
.sidebar-container { .sidebar-container {
transition: transform 0.28s; transition: transform 0.1s;
width: $sideBarWidth; width: $sideBarWidth;
} }
@ -572,7 +581,7 @@ body[layout="vertical"] {
.hideSidebar { .hideSidebar {
.fixed-header { .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
transition: width 0.28s; transition: width 0.1s;
} }
.sidebar-container { .sidebar-container {
@ -606,17 +615,25 @@ body[layout="vertical"] {
} }
} }
/* 有无子菜单 */
.el-sub-menu__title,
.el-menu-item [class^="el-icon"] {
right: 5px;
}
.submenu-title-noDropdown { .submenu-title-noDropdown {
background: transparent !important; background: transparent !important;
} }
/* 有无子菜单 */
.el-sub-menu__title,
.el-menu-item [class^="el-icon"] {
right: 2px;
}
.el-menu-tooltip__trigger {
padding: 0 18px;
}
} }
} }
.sub-menu-icon {
width: 24px;
}
} }
body[layout="horizontal"] { body[layout="horizontal"] {
@ -640,7 +657,7 @@ body[layout="mix"] {
.hideSidebar { .hideSidebar {
.fixed-header { .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
transition: width 0.28s; transition: width 0.1s;
} }
.sidebar-container { .sidebar-container {