修复了导航栏自适应时节点未更新的问题 修复了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"> |
<script type="text/jsx"> |
||||||
import OnePart from './OnePart' |
import OnePart from './component/OnePartRoot' |
||||||
import TwoPart from './TwoPart' |
import TwoPartRoot from './component/TwoPartRoot' |
||||||
|
import TwoPartSub from './component/TwoPartSub' |
||||||
import {getters as appGetters} from "@/layout/store/app" |
import {getters as appGetters} from "@/layout/store/app" |
||||||
|
import {getters as asideGetters} from "@/layout/store/aside" |
||||||
|
|
||||||
export default { |
export default { |
||||||
functional: true, |
functional: true, |
||||||
|
|
||||||
render() { |
render() { |
||||||
|
let children |
||||||
|
|
||||||
//移动端只能使用抽屉模式的单层侧边栏 |
//移动端只能使用抽屉模式的单层侧边栏 |
||||||
if (appGetters.isMobile) { |
if (appGetters.isMobile) { |
||||||
return <OnePart/> |
children = <OnePart/> |
||||||
} |
} |
||||||
|
else { |
||||||
switch (appGetters.navMode) { |
switch (appGetters.navMode) { |
||||||
case 'mix': |
case 'mix': |
||||||
case 'aside': |
case 'aside': |
||||||
return <OnePart/> |
children = <OnePart/> |
||||||
case 'aside-two-part': |
break |
||||||
return <TwoPart/> |
case 'aside-two-part': |
||||||
|
children = [<TwoPartRoot/>, <TwoPartSub/>] |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
|
return <aside class={`aside ${asideGetters.theme}`}>{children}</aside> |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"> |
<style lang="scss" src="./style.scss"></style> |
||||||
.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; |
|
||||||
} |
|
||||||
|
|
||||||
/* 侧边栏切换动画结束 */ |
|
||||||
</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