Commit 7ff0e5de authored by tianhongyang's avatar tianhongyang

🎈 perf(菜单样式统一UI):

parent 0d952d0e
...@@ -99,8 +99,10 @@ ...@@ -99,8 +99,10 @@
margin-right: 8px; margin-right: 8px;
} }
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
top: 54%; top: 50%;
right: 5px; transform: translateY(-50%);
margin-top: 0px;
right: 8px;
color: #d8d8d8; color: #d8d8d8;
} }
...@@ -121,7 +123,7 @@ ...@@ -121,7 +123,7 @@
min-width: 128px; min-width: 128px;
font-size: 12px; font-size: 12px;
color: #fff !important; color: #fff !important;
padding-left: 24px !important; padding-left: 24px;
} }
.el-menu--inline .nest-menu .el-menu-item .svg-icon { .el-menu--inline .nest-menu .el-menu-item .svg-icon {
display: none; display: none;
...@@ -328,6 +330,42 @@ ...@@ -328,6 +330,42 @@
transition: none; transition: none;
} }
} }
// 重置导航栏菜单样式
.el-menu {
.secondary-menu {
.secondary-menu-item {
&.el-submenu {
& > {
.el-menu--inline {
padding: 0px;
.secondary-menu-item-sub {
.el-menu-item {
font-size: 14px;
padding-left: 32px !important;
}
& > .secondary-menu-item {
.el-submenu__title {
padding-left: 32px !important;
}
& > .el-menu--inline {
.secondary-menu-item-sub {
.el-menu-item {
font-size: 12px;
padding-left: 40px !important;
}
}
}
}
}
}
}
}
}
}
}
} }
// when menu collapsed // when menu collapsed
......
...@@ -9,12 +9,12 @@ ...@@ -9,12 +9,12 @@
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body class="secondary-menu-item">
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="sideIcon(item)" :title="item.meta.title" /> <item v-if="item.meta" :icon="sideIcon(item)" :title="item.meta.title" />
</template> </template>
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path,child.query)" <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path,child.query)"
:active-menu="activeMenu" class="nest-menu" /> :active-menu="activeMenu" class="nest-menu secondary-menu-item-sub" />
</el-submenu> </el-submenu>
</template> </template>
<!-- 收起 --> <!-- 收起 -->
......
<template> <template>
<div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave"
:style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
:default-active="activeMenu" :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
:collapse="isCollapse" <sidebar-item v-for="(route, index) in hidechildren" :key="route.path + index" :is-collapse="isCollapse" :active-menu="activeMenu"
:background-color="variables.menuBg" :item="route" :base-path="route.path" :class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
:text-color="variables.menuText" :style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''" class="secondary-menu"/>
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in hidechildren"
:key="route.path + index"
:is-collapse="isCollapse"
:active-menu="activeMenu"
:item="route"
:base-path="route.path"
:class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
:style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''"
/>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
<div v-show="isExpand" class="side-expand" @click="toggleSideBar"> <div v-show="isExpand" class="side-expand" @click="toggleSideBar">
...@@ -44,22 +28,22 @@ export default { ...@@ -44,22 +28,22 @@ export default {
data() { data() {
return { return {
isExpand: false isExpand: false
} };
}, },
computed: { computed: {
...mapState(["settings"]), ...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]), ...mapGetters(["sidebarRouters", "sidebar"]),
hidechildren(){ hidechildren() {
return this.sidebarRouters.map(item=>{ return this.sidebarRouters.map(item => {
if(item.children?.length){ if (item.children?.length) {
item.children = item.children.filter(i=>{ item.children = item.children.filter(i => {
if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index"){ if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index") {
return i return i;
} }
}) });
} }
return item return item;
}) });
}, },
activeMenu() { activeMenu() {
const route = this.$route; const route = this.$route;
...@@ -71,12 +55,12 @@ export default { ...@@ -71,12 +55,12 @@ export default {
return path; return path;
}, },
device() { device() {
return this.$store.state.app.device return this.$store.state.app.device;
}, },
bottomMenu() { bottomMenu() {
const routeArr = this.$router.options.routes const routeArr = this.$router.options.routes;
const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed) const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed);
return navFixed.length return navFixed.length;
}, },
showLogo() { showLogo() {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
...@@ -89,16 +73,16 @@ export default { ...@@ -89,16 +73,16 @@ export default {
}, },
}, },
methods: { methods: {
toggleSideBar(){ toggleSideBar() {
this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差 this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
this.$store.dispatch('app/toggleSideBar'); this.$store.dispatch('app/toggleSideBar');
}, },
sideEnter(){ sideEnter() {
if (this.device !== 'mobile') { if (this.device !== 'mobile') {
this.isExpand = true; this.isExpand = true;
} }
}, },
sideLeave(){ sideLeave() {
if (this.device !== 'mobile') { if (this.device !== 'mobile') {
this.isExpand = false; this.isExpand = false;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment