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 }"
:style="getNoDropdownStyle"
>
<div class="el-icon" v-show="props.item.meta.icon">
<div class="sub-menu-icon" v-show="props.item.meta.icon">
<component
:is="
useRenderIcon(
@ -216,10 +216,7 @@ function resolvePath(routePath) {
popper-append-to-body
>
<template #title>
<div
v-show="props.item.meta.icon"
:class="['el-icon', props.item.meta.icon]"
>
<div v-show="props.item.meta.icon" class="sub-menu-icon">
<component
: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 {
height: 100vh;
min-height: 100%;
transition: margin-left 0.28s;
transition: margin-left 0.1s;
margin-left: $sideBarWidth;
position: relative;
background: #f0f2f5;
@ -29,7 +38,7 @@
right: 0;
z-index: 998;
width: calc(100% - 210px);
transition: width 0.28s;
transition: width 0.1s;
}
.main-hidden {
@ -49,7 +58,7 @@
}
.sidebar-container {
transition: width 0.28s;
transition: width 0.1s;
width: $sideBarWidth !important;
background: $menuBg;
height: 100%;
@ -527,7 +536,7 @@
.mobile {
.fixed-header {
width: 100% !important;
transition: width 0.28s;
transition: width 0.1s;
}
.main-container {
@ -535,7 +544,7 @@
}
.sidebar-container {
transition: transform 0.28s;
transition: transform 0.1s;
width: $sideBarWidth;
}
@ -572,7 +581,7 @@ body[layout="vertical"] {
.hideSidebar {
.fixed-header {
width: calc(100% - 54px);
transition: width 0.28s;
transition: width 0.1s;
}
.sidebar-container {
@ -606,17 +615,25 @@ body[layout="vertical"] {
}
}
/* 有无子菜单 */
.el-sub-menu__title,
.el-menu-item [class^="el-icon"] {
right: 5px;
}
.submenu-title-noDropdown {
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"] {
@ -640,7 +657,7 @@ body[layout="mix"] {
.hideSidebar {
.fixed-header {
width: calc(100% - 54px);
transition: width 0.28s;
transition: width 0.1s;
}
.sidebar-container {