修复了导航栏自适应时节点未更新的问题 修复了SettingDrawer由于layout设置变化而重新渲染的问题 导航菜单在没有icon时不会再渲染占位元素 ContextMenu表现形式修改： - 使用v-show代替整个dom的移除 - 定位由absolute改为fixed 代码优化master
toesbieya
6 years ago
parent
a444d520d3
commit
a042a94346
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,61 @@ |
||||
.el-menu--dark { |
||||
//侧边栏垂直菜单 |
||||
&.el-menu--vertical { |
||||
&.el-menu, |
||||
.el-menu { |
||||
background-color: $menu-dark-background; |
||||
|
||||
//菜单的文字以及hover颜色 |
||||
.el-menu-item, |
||||
.el-submenu__title { |
||||
color: $menu-text-dark-color; |
||||
|
||||
&:hover { |
||||
color: $menu-text-dark-hover-color; |
||||
} |
||||
} |
||||
|
||||
//子级菜单的背景颜色 |
||||
&.el-menu--inline, |
||||
.el-submenu .el-submenu > .el-submenu__title { |
||||
background-color: $sub-menu-dark-background; |
||||
} |
||||
|
||||
//子级菜单内阴影 |
||||
&.el-menu--inline { |
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45) |
||||
} |
||||
|
||||
//设置了显示弹出菜单的父级 |
||||
&.el-menu--popup .popover-menu__title { |
||||
color: $menu-text-dark-hover-color; |
||||
border-bottom-color: #101117; |
||||
} |
||||
} |
||||
} |
||||
|
||||
//顶部水平菜单 |
||||
&.el-menu--horizontal { |
||||
&.el-menu, |
||||
.el-menu { |
||||
background-color: $root-menu-dark-background; |
||||
|
||||
//菜单的文字以及hover颜色 |
||||
.el-menu-item, |
||||
.el-submenu__title { |
||||
color: $menu-text-dark-color; |
||||
|
||||
&:hover { |
||||
color: $menu-text-dark-hover-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.el-menu > .el-menu-item, |
||||
&.el-menu > .el-submenu > .el-submenu__title, |
||||
&.el-menu > .el-menu-item:hover, |
||||
&.el-menu > .el-submenu > .el-submenu__title:hover { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@ |
||||
.el-menu--light { |
||||
//侧边栏垂直菜单 |
||||
&.el-menu--vertical { |
||||
&.el-menu, |
||||
.el-menu { |
||||
//菜单的文字以及hover颜色 |
||||
.el-menu-item, |
||||
.el-submenu__title { |
||||
color: $menu-text-light-color; |
||||
|
||||
&:hover { |
||||
color: $menu-text-hover-light-color; |
||||
} |
||||
} |
||||
|
||||
//弹出菜单的父级 |
||||
&.el-menu--popup .popover-menu__title { |
||||
color: $menu-text-hover-light-color; |
||||
border-bottom-color: #dcdfe6; |
||||
} |
||||
} |
||||
} |
||||
|
||||
//顶部水平菜单 |
||||
&.el-menu--horizontal { |
||||
&.el-menu, |
||||
.el-menu { |
||||
//菜单的文字以及hover颜色 |
||||
.el-menu-item, |
||||
.el-submenu__title { |
||||
color: $menu-text-light-color; |
||||
|
||||
&:hover { |
||||
color: $menu-text-hover-light-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,17 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
import RootSidebar from './root' |
||||
import SubSidebar from './sub' |
||||
|
||||
export default { |
||||
functional: true, |
||||
|
||||
render() { |
||||
return ( |
||||
<aside class="aside"> |
||||
<RootSidebar/> |
||||
<SubSidebar/> |
||||
</aside> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,48 +1,34 @@ |
||||
<script type="text/jsx"> |
||||
import OnePart from './OnePart' |
||||
import TwoPart from './TwoPart' |
||||
import OnePart from './component/OnePartRoot' |
||||
import TwoPartRoot from './component/TwoPartRoot' |
||||
import TwoPartSub from './component/TwoPartSub' |
||||
import {getters as appGetters} from "@/layout/store/app" |
||||
import {getters as asideGetters} from "@/layout/store/aside" |
||||
|
||||
export default { |
||||
functional: true, |
||||
|
||||
render() { |
||||
let children |
||||
|
||||
//移动端只能使用抽屉模式的单层侧边栏 |
||||
if (appGetters.isMobile) { |
||||
return <OnePart/> |
||||
children = <OnePart/> |
||||
} |
||||
|
||||
else { |
||||
switch (appGetters.navMode) { |
||||
case 'mix': |
||||
case 'aside': |
||||
return <OnePart/> |
||||
children = <OnePart/> |
||||
break |
||||
case 'aside-two-part': |
||||
return <TwoPart/> |
||||
children = [<TwoPartRoot/>, <TwoPartSub/>] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.aside { |
||||
display: flex; |
||||
position: relative; |
||||
} |
||||
|
||||
/* 侧边栏切换动画开始 */ |
||||
.sidebar-enter-active { |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.sidebar-enter, |
||||
.sidebar-leave-active { |
||||
opacity: 0; |
||||
transform: translateY(30px) skewY(10deg) |
||||
} |
||||
|
||||
.sidebar-leave-active { |
||||
position: absolute; |
||||
return <aside class={`aside ${asideGetters.theme}`}>{children}</aside> |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
/* 侧边栏切换动画结束 */ |
||||
</style> |
||||
<style lang="scss" src="./style.scss"></style> |
||||
|
||||
@ -0,0 +1,89 @@ |
||||
@import "~@/asset/style/variables.scss"; |
||||
|
||||
.aside { |
||||
display: flex; |
||||
z-index: 11; |
||||
|
||||
//移动端下侧边栏抽屉不能设置z-index，否则会被modal遮住 |
||||
@include mobile { |
||||
z-index: auto; |
||||
} |
||||
|
||||
//单层和双层侧边栏 |
||||
.sidebar, |
||||
.root-sidebar, |
||||
.sub-sidebar { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
width: $aside-width; |
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); |
||||
transition: all 0.2s; |
||||
|
||||
//折叠状态 |
||||
&.collapse { |
||||
width: $aside-collapse-width; |
||||
|
||||
//隐藏菜单文字 |
||||
.menu-item-content, |
||||
.sub-sidebar-title { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//页面为上下结构时，侧边栏的抽屉模式需要扣除导航栏的高度 |
||||
.el-drawer.drawer-behind-header { |
||||
top: $nav-height; |
||||
} |
||||
|
||||
|
||||
/* 双侧侧边栏开始 */ |
||||
|
||||
.root-sidebar-container { |
||||
position: relative; |
||||
width: $aside-collapse-width; |
||||
height: 100%; |
||||
} |
||||
|
||||
.root-sidebar { |
||||
position: absolute; |
||||
overflow: hidden; |
||||
z-index: 1; |
||||
box-shadow: none !important; |
||||
border-right-width: 1px; |
||||
border-right-style: solid; |
||||
} |
||||
|
||||
.sub-sidebar-title { |
||||
height: $nav-height; |
||||
line-height: $nav-height; |
||||
padding-left: 20px; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
/* 双侧侧边栏结束 */ |
||||
|
||||
|
||||
/* 侧边栏切换动画开始 */ |
||||
|
||||
.sidebar-enter-active { |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.sidebar-enter, |
||||
.sidebar-leave-active { |
||||
opacity: 0; |
||||
transform: translateY(30px) skewY(10deg) |
||||
} |
||||
|
||||
.sidebar-leave-active { |
||||
position: absolute; |
||||
} |
||||
|
||||
/* 侧边栏切换动画结束 */ |
||||
|
||||
|
||||
@import "theme-light"; |
||||
@import "theme-dark"; |
||||
@ -0,0 +1,18 @@ |
||||
.dark { |
||||
&.aside { |
||||
background-color: $menu-dark-background; |
||||
} |
||||
|
||||
.root-sidebar, |
||||
.root-sidebar > .el-menu--vertical.el-menu { |
||||
background-color: $root-menu-dark-background; |
||||
} |
||||
|
||||
.root-sidebar { |
||||
border-right-color: #101117; |
||||
} |
||||
|
||||
.sub-sidebar-title { |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
.light { |
||||
.root-sidebar { |
||||
background-color: #ffffff; |
||||
border-right-color: #dcdfe6; |
||||
} |
||||
} |
||||
@ -0,0 +1,49 @@ |
||||
@import "~@/asset/style/variables.scss"; |
||||
|
||||
.navbar { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
flex-wrap: nowrap; |
||||
height: $nav-height; |
||||
padding-left: 12px; |
||||
z-index: 10; |
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); |
||||
transition: all .2s; |
||||
|
||||
> div { |
||||
display: flex; |
||||
flex-wrap: nowrap; |
||||
height: 100%; |
||||
} |
||||
|
||||
.navbar-icon { |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.navbar-item { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 8px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.logo-container { |
||||
width: auto; |
||||
min-width: 192px; |
||||
padding-left: 8px; |
||||
} |
||||
|
||||
.avatar-wrapper { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
span { |
||||
margin-right: 5px; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@import "theme-light"; |
||||
@import "theme-dark"; |
||||
@ -0,0 +1,11 @@ |
||||
.navbar.dark { |
||||
background-color: $root-menu-dark-background; |
||||
|
||||
.navbar-item { |
||||
color: rgba(255, 255, 255, .85); |
||||
|
||||
&:hover { |
||||
background: $--color-primary; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
.navbar.light { |
||||
background-color: #ffffff; |
||||
|
||||
.navbar-item { |
||||
color: $menu-text-light-color; |
||||
|
||||
&:hover { |
||||
background: rgba(0, 0, 0, .025); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
import Vue from 'vue' |
||||
import {createGetters, createMutations} from "@/util/observable" |
||||
|
||||
const state = { |
||||
//主题，light 或 dark
|
||||
theme: 'light', |
||||
} |
||||
|
||||
const store = Vue.observable(state) |
||||
|
||||
export const getters = createGetters(store) |
||||
|
||||
export const mutations = createMutations(store) |
||||
Loading…
Reference in new issue