toesbieya
6 years ago
parent
a6a19976e2
commit
4925fd52af
@ -0,0 +1,222 @@ |
|||||||
|
<script type="text/jsx"> |
||||||
|
import menuMixin from "@/layout/mixin/menu" |
||||||
|
import {getters as appGetters} from "@/layout/store/app" |
||||||
|
import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside" |
||||||
|
import Logo from '@/layout/component/Aside/Logo' |
||||||
|
import NavMenu from '@/component/menu/NavMenu' |
||||||
|
import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util" |
||||||
|
import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu" |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Sidebar", |
||||||
|
|
||||||
|
mixins: [menuMixin], |
||||||
|
|
||||||
|
components: {Logo, NavMenu}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
//鼠标是否在侧边栏外 |
||||||
|
mouseOutside: true |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
isMobile: () => appGetters.isMobile, |
||||||
|
|
||||||
|
//侧边栏菜单 |
||||||
|
menus: () => getSidebarMenus(), |
||||||
|
|
||||||
|
//当时移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹 |
||||||
|
renderInDrawer() { |
||||||
|
return this.isMobile || asideGetters.autoHide |
||||||
|
}, |
||||||
|
|
||||||
|
//侧边栏的显隐状态，true显示、false隐藏 |
||||||
|
show() { |
||||||
|
//store中要显示那就显示 |
||||||
|
if (asideGetters.show) return true |
||||||
|
|
||||||
|
//移动端，false |
||||||
|
if (this.isMobile) return false |
||||||
|
|
||||||
|
//未设置侧边栏自动隐藏，false |
||||||
|
if (!asideGetters.autoHide) return false |
||||||
|
|
||||||
|
//鼠标在侧边栏内，true |
||||||
|
if (!this.mouseOutside) return true |
||||||
|
|
||||||
|
//侧边栏处于折叠状态 且 存在弹出的子菜单，true |
||||||
|
return this.collapse && this.openedMenuNum > 0 |
||||||
|
}, |
||||||
|
|
||||||
|
//侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠 |
||||||
|
collapse() { |
||||||
|
return asideGetters.collapse && !this.isMobile |
||||||
|
}, |
||||||
|
|
||||||
|
//判断是否需要绑定鼠标移动的事件 |
||||||
|
shouldBindMouseMoveEvent() { |
||||||
|
//如果是移动端，false |
||||||
|
if (this.isMobile) return false |
||||||
|
|
||||||
|
//如果未启用侧边栏自动隐藏，false |
||||||
|
if (!asideGetters.autoHide) return false |
||||||
|
|
||||||
|
//侧边栏为打开状态，false |
||||||
|
if (this.show) return false |
||||||
|
|
||||||
|
//鼠标在侧边栏外部，true |
||||||
|
return this.mouseOutside |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
watch: { |
||||||
|
'$route.path': { |
||||||
|
immediate: true, |
||||||
|
handler(v) { |
||||||
|
//如果是redirect跳转，则跳过 |
||||||
|
if (v.startsWith('/redirect')) return |
||||||
|
|
||||||
|
this.activeMenu = getActiveMenuByRoute(this.$route) |
||||||
|
|
||||||
|
const menu = this.$refs.menu |
||||||
|
if (!menu) return |
||||||
|
const item = menu.items[this.activeMenu] |
||||||
|
|
||||||
|
//如果侧边栏中没有对应的激活菜单，则收起全部 |
||||||
|
if (!item) return menu.openedMenus = [] |
||||||
|
|
||||||
|
//由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发 |
||||||
|
this.onSelect(item.index, item.indexPath, item, false) |
||||||
|
|
||||||
|
//仅当非抽屉模式下滚动至激活的菜单 |
||||||
|
!this.renderInDrawer && this.$nextTick(this.moveToCurrentMenu) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
//切换至移动端时收起侧边栏 |
||||||
|
isMobile: { |
||||||
|
immediate: true, |
||||||
|
handler(v) { |
||||||
|
v && asideMutations.close() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
//抽屉模式下侧边栏显示时滚动至激活菜单 |
||||||
|
show(v) { |
||||||
|
v && this.$nextTick(this.moveToCurrentMenu) |
||||||
|
}, |
||||||
|
|
||||||
|
//添加或移除鼠标移动事件 |
||||||
|
shouldBindMouseMoveEvent: { |
||||||
|
immediate: true, |
||||||
|
handler(v) { |
||||||
|
//尝试移除之前可能添加的事件 |
||||||
|
window.removeEventListener('mousemove', this.moveEvent) |
||||||
|
|
||||||
|
v && window.addEventListener('mousemove', this.moveEvent) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
//开启侧边栏自动隐藏后的鼠标移动事件 |
||||||
|
moveEvent(e) { |
||||||
|
//鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部 |
||||||
|
if (e.clientX <= 1) this.mouseOutside = false |
||||||
|
}, |
||||||
|
|
||||||
|
//模拟选中菜单 |
||||||
|
onSelect(index, indexPath, item, jump = true) { |
||||||
|
//开启手风琴模式时，激活没有子级的菜单时收起其它展开项 |
||||||
|
if (asideGetters.uniqueOpen && indexPath.length === 1) { |
||||||
|
const menu = this.$refs.menu |
||||||
|
const opened = menu.openedMenus |
||||||
|
opened.forEach(i => i !== index && menu.closeMenu(i)) |
||||||
|
} |
||||||
|
|
||||||
|
jump && this.actionOnSelectMenu(index) |
||||||
|
|
||||||
|
//抽屉模式下需要关闭抽屉 |
||||||
|
if (this.renderInDrawer && this.show) { |
||||||
|
asideMutations.close() |
||||||
|
this.mouseOutside = true |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
//滚动至当前激活的菜单 |
||||||
|
moveToCurrentMenu() { |
||||||
|
moveToActiveMenuVertically(this.$refs.menu) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy() { |
||||||
|
window.removeEventListener('mousemove', this.moveEvent) |
||||||
|
}, |
||||||
|
|
||||||
|
render() { |
||||||
|
if (this.menus.length <= 0) return |
||||||
|
|
||||||
|
const aside = ( |
||||||
|
<aside |
||||||
|
class={{'aside': true, 'sidebar': true, 'collapse': this.collapse}} |
||||||
|
on-mouseleave={() => this.mouseOutside = true} |
||||||
|
on-mouseenter={() => this.mouseOutside = false} |
||||||
|
> |
||||||
|
{asideGetters.showLogo && <logo collapse={this.collapse}/>} |
||||||
|
<nav-menu |
||||||
|
menus={this.menus} |
||||||
|
collapse={this.collapse} |
||||||
|
default-active={this.activeMenu} |
||||||
|
unique-opened={asideGetters.uniqueOpen} |
||||||
|
show-parent={asideGetters.showParentOnCollapse} |
||||||
|
switch-transition |
||||||
|
on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}} |
||||||
|
/> |
||||||
|
</aside> |
||||||
|
) |
||||||
|
|
||||||
|
if (this.renderInDrawer) { |
||||||
|
return ( |
||||||
|
<el-drawer |
||||||
|
visible={this.show} |
||||||
|
with-header={false} |
||||||
|
direction="ltr" |
||||||
|
size="auto" |
||||||
|
on-close={() => asideMutations.close()} |
||||||
|
> |
||||||
|
{aside} |
||||||
|
</el-drawer> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return aside |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
@import "~@/asset/style/variables.scss"; |
||||||
|
|
||||||
|
.sidebar { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: $aside-width; |
||||||
|
background-color: $aside-menu-background; |
||||||
|
font-size: 0; |
||||||
|
height: 100vh; |
||||||
|
z-index: 10; |
||||||
|
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
|
||||||
|
//折叠状态 |
||||||
|
&.collapse { |
||||||
|
width: $aside-icon-size + 20px * 2; |
||||||
|
|
||||||
|
.menu-item-content { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,12 +1,84 @@ |
|||||||
<script> |
<script type="text/jsx"> |
||||||
|
import RootSidebar from './root' |
||||||
|
import SubSidebar from './sub' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "TwoPartSidebar", |
functional: true, |
||||||
data() { |
|
||||||
return {} |
|
||||||
}, |
|
||||||
methods: {}, |
|
||||||
mounted() { |
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<aside class="aside"> |
||||||
|
<RootSidebar/> |
||||||
|
<SubSidebar/> |
||||||
|
</aside> |
||||||
|
) |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
@import "~@/asset/style/variables.scss"; |
||||||
|
|
||||||
|
$background-color: #1d2935; |
||||||
|
|
||||||
|
.root-sidebar-container { |
||||||
|
width: $aside-icon-size + 20px * 2; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.root-sidebar { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
position: absolute; |
||||||
|
height: 100vh; |
||||||
|
width: $aside-width; |
||||||
|
background-color: $background-color; |
||||||
|
overflow: hidden; |
||||||
|
z-index: 11; |
||||||
|
border-right: 1px solid #101117; |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
|
||||||
|
> .el-menu--vertical.el-menu { |
||||||
|
background-color: $background-color; |
||||||
|
} |
||||||
|
|
||||||
|
//折叠状态 |
||||||
|
&.collapse { |
||||||
|
width: $aside-icon-size + 20px * 2; |
||||||
|
|
||||||
|
.menu-item-content { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sub-sidebar { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: $aside-width; |
||||||
|
background-color: $aside-menu-background; |
||||||
|
font-size: 0; |
||||||
|
height: 100vh; |
||||||
|
z-index: 10; |
||||||
|
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
|
||||||
|
//折叠状态 |
||||||
|
&.collapse { |
||||||
|
width: $aside-icon-size + 20px * 2; |
||||||
|
|
||||||
|
.sub-sidebar-title, |
||||||
|
.menu-item-content { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-title { |
||||||
|
height: $nav-height; |
||||||
|
line-height: $nav-height; |
||||||
|
padding-left: 20px; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -1,20 +1,97 @@ |
|||||||
<template> |
<script type="text/jsx"> |
||||||
|
import menuMixin from "@/layout/mixin/menu" |
||||||
|
import {getters as appGetters} from "@/layout/store/app" |
||||||
|
import {getters as asideGetters} from "@/layout/store/aside" |
||||||
|
import NavMenu from "@/component/menu/NavMenu" |
||||||
|
import {getActiveMenuByRoute, getSidebarMenus} from "@/layout/util" |
||||||
|
import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu" |
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
export default { |
||||||
name: "TwoPartSubSidebar", |
name: "SubSidebar", |
||||||
data() { |
|
||||||
return {} |
mixins: [menuMixin], |
||||||
|
|
||||||
|
components: {NavMenu}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
//父级菜单 |
||||||
|
rootMenu() { |
||||||
|
const active = appGetters.activeRootMenu |
||||||
|
return appGetters.menus.find(i => i.fullPath === active) |
||||||
|
}, |
||||||
|
|
||||||
|
//侧边栏菜单 |
||||||
|
menus: () => getSidebarMenus(), |
||||||
|
|
||||||
|
//侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠 |
||||||
|
collapse() { |
||||||
|
return asideGetters.collapse && !asideGetters.isMobile |
||||||
}, |
}, |
||||||
methods: {}, |
}, |
||||||
mounted() { |
|
||||||
|
watch: { |
||||||
|
'$route.path': { |
||||||
|
immediate: true, |
||||||
|
handler(v) { |
||||||
|
//如果是redirect跳转，则跳过 |
||||||
|
if (v.startsWith('/redirect')) return |
||||||
|
|
||||||
|
this.activeMenu = getActiveMenuByRoute(this.$route) |
||||||
|
|
||||||
|
const menu = this.$refs.menu |
||||||
|
if (!menu) return |
||||||
|
const item = menu.items[this.activeMenu] |
||||||
|
|
||||||
|
//如果侧边栏中没有对应的激活菜单，则收起全部 |
||||||
|
if (!item) return menu.openedMenus = [] |
||||||
|
|
||||||
|
//由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发 |
||||||
|
this.onSelect(item.index, item.indexPath, item, false) |
||||||
|
|
||||||
|
//滚动至激活的菜单 |
||||||
|
this.$nextTick(this.moveToCurrentMenu) |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
}, |
||||||
|
|
||||||
<style scoped> |
methods: { |
||||||
|
//模拟选中菜单 |
||||||
|
onSelect(index, indexPath, item, jump = true) { |
||||||
|
//开启手风琴模式时，激活没有子级的菜单时收起其它展开项 |
||||||
|
if (asideGetters.uniqueOpen && indexPath.length === 1) { |
||||||
|
const menu = this.$refs.menu |
||||||
|
const opened = menu.openedMenus |
||||||
|
opened.forEach(i => i !== index && menu.closeMenu(i)) |
||||||
|
} |
||||||
|
|
||||||
</style> |
jump && this.actionOnSelectMenu(index) |
||||||
|
}, |
||||||
|
|
||||||
|
//滚动至当前激活的菜单 |
||||||
|
moveToCurrentMenu() { |
||||||
|
moveToActiveMenuVertically(this.$refs.menu) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
render() { |
||||||
|
if (this.menus.length <= 0) return |
||||||
|
|
||||||
|
return ( |
||||||
|
<div class={{'sub-sidebar': true, 'collapse': this.collapse}}> |
||||||
|
<div class="sub-sidebar-title"> |
||||||
|
{this.rootMenu && this.rootMenu.meta.title} |
||||||
|
</div> |
||||||
|
<nav-menu |
||||||
|
menus={this.menus} |
||||||
|
collapse={this.collapse} |
||||||
|
default-active={this.activeMenu} |
||||||
|
unique-opened={asideGetters.uniqueOpen} |
||||||
|
show-parent={asideGetters.showParentOnCollapse} |
||||||
|
switch-transition |
||||||
|
on-select={this.onSelect} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|||||||
@ -1,208 +1,48 @@ |
|||||||
<script type="text/jsx"> |
<script type="text/jsx"> |
||||||
import menuMixin from "@/layout/mixin/menu" |
import OnePart from './OnePart' |
||||||
|
import TwoPart from './TwoPart' |
||||||
import {getters as appGetters} from "@/layout/store/app" |
import {getters as appGetters} from "@/layout/store/app" |
||||||
import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside" |
|
||||||
import Logo from '@/layout/component/Aside/Logo' |
|
||||||
import NavMenuItem from '@/component/menu/NavMenu/item' |
|
||||||
import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util" |
|
||||||
import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu" |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'Aside', |
functional: true, |
||||||
|
|
||||||
mixins: [menuMixin], |
render() { |
||||||
|
//移动端只能使用抽屉模式的单层侧边栏 |
||||||
components: {Logo, NavMenuItem}, |
if (appGetters.isMobile) { |
||||||
|
return <OnePart/> |
||||||
data() { |
|
||||||
return { |
|
||||||
//鼠标是否在侧边栏外 |
|
||||||
mouseOutside: true |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
isMobile: () => appGetters.isMobile, |
|
||||||
|
|
||||||
//侧边栏菜单 |
|
||||||
menus: () => getSidebarMenus(), |
|
||||||
|
|
||||||
//当时移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹 |
|
||||||
renderInDrawer() { |
|
||||||
return this.isMobile || asideGetters.autoHide |
|
||||||
}, |
|
||||||
|
|
||||||
//侧边栏的显隐状态，true显示、false隐藏 |
|
||||||
show() { |
|
||||||
//store中要显示那就显示 |
|
||||||
if (asideGetters.show) return true |
|
||||||
|
|
||||||
//移动端，false |
|
||||||
if (this.isMobile) return false |
|
||||||
|
|
||||||
//未设置侧边栏自动隐藏，false |
|
||||||
if (!asideGetters.autoHide) return false |
|
||||||
|
|
||||||
//鼠标在侧边栏内，true |
|
||||||
if (!this.mouseOutside) return true |
|
||||||
|
|
||||||
//侧边栏处于折叠状态 且 存在弹出的子菜单，true |
|
||||||
return this.collapse && this.openedMenuNum > 0 |
|
||||||
}, |
|
||||||
|
|
||||||
//侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠 |
|
||||||
collapse() { |
|
||||||
return asideGetters.collapse && !this.isMobile |
|
||||||
}, |
|
||||||
|
|
||||||
//判断是否需要绑定鼠标移动的事件 |
|
||||||
shouldBindMouseMoveEvent() { |
|
||||||
//如果是移动端，false |
|
||||||
if (this.isMobile) return false |
|
||||||
|
|
||||||
//如果未启用侧边栏自动隐藏，false |
|
||||||
if (!asideGetters.autoHide) return false |
|
||||||
|
|
||||||
//侧边栏为打开状态，false |
|
||||||
if (this.show) return false |
|
||||||
|
|
||||||
//鼠标在侧边栏外部，true |
|
||||||
return this.mouseOutside |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
watch: { |
|
||||||
'$route.path': { |
|
||||||
immediate: true, |
|
||||||
handler(v) { |
|
||||||
//如果是redirect跳转，则跳过 |
|
||||||
if (v.startsWith('/redirect')) return |
|
||||||
|
|
||||||
this.activeMenu = getActiveMenuByRoute(this.$route) |
|
||||||
|
|
||||||
const menu = this.$refs.menu |
|
||||||
if (!menu) return |
|
||||||
const item = menu.items[this.activeMenu] |
|
||||||
|
|
||||||
//如果侧边栏中没有对应的激活菜单，则收起全部 |
|
||||||
if (!item) return menu.openedMenus = [] |
|
||||||
|
|
||||||
//由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发 |
|
||||||
this.onSelect(item.index, item.indexPath, item, false) |
|
||||||
|
|
||||||
//仅当非抽屉模式下滚动至激活的菜单 |
|
||||||
!this.renderInDrawer && this.$nextTick(this.moveToCurrentMenu) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
//切换至移动端时收起侧边栏 |
|
||||||
isMobile: { |
|
||||||
immediate: true, |
|
||||||
handler(v) { |
|
||||||
v && asideMutations.close() |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
//抽屉模式下侧边栏显示时滚动至激活菜单 |
|
||||||
show(v) { |
|
||||||
v && this.$nextTick(this.moveToCurrentMenu) |
|
||||||
}, |
|
||||||
|
|
||||||
//添加或移除鼠标移动事件 |
|
||||||
shouldBindMouseMoveEvent: { |
|
||||||
immediate: true, |
|
||||||
handler(v) { |
|
||||||
//尝试移除之前可能添加的事件 |
|
||||||
window.removeEventListener('mousemove', this.moveEvent) |
|
||||||
|
|
||||||
v && window.addEventListener('mousemove', this.moveEvent) |
|
||||||
} |
|
||||||
} |
} |
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
//开启侧边栏自动隐藏后的鼠标移动事件 |
|
||||||
moveEvent(e) { |
|
||||||
//鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部 |
|
||||||
if (e.clientX <= 1) this.mouseOutside = false |
|
||||||
}, |
|
||||||
|
|
||||||
//模拟选中菜单 |
switch (appGetters.navMode) { |
||||||
onSelect(index, indexPath, item, jump = true) { |
case 'mix': |
||||||
//开启手风琴模式时，激活没有子级的菜单时收起其它展开项 |
case 'aside': |
||||||
if (asideGetters.uniqueOpen && indexPath.length === 1) { |
return <OnePart/> |
||||||
const menu = this.$refs.menu |
case 'aside-two-part': |
||||||
const opened = menu.openedMenus |
return <TwoPart/> |
||||||
opened.forEach(i => i !== index && menu.closeMenu(i)) |
|
||||||
} |
} |
||||||
|
|
||||||
jump && this.actionOnSelectMenu(index) |
|
||||||
|
|
||||||
//抽屉模式下需要关闭抽屉 |
|
||||||
if (this.renderInDrawer && this.show) { |
|
||||||
asideMutations.close() |
|
||||||
this.mouseOutside = true |
|
||||||
} |
} |
||||||
}, |
} |
||||||
|
</script> |
||||||
//滚动至当前激活的菜单 |
|
||||||
moveToCurrentMenu() { |
|
||||||
moveToActiveMenuVertically(this.$refs.menu) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
beforeDestroy() { |
|
||||||
window.removeEventListener('mousemove', this.moveEvent) |
|
||||||
}, |
|
||||||
|
|
||||||
render() { |
<style lang="scss"> |
||||||
if (this.menus.length <= 0) return |
.aside { |
||||||
|
display: flex; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
const aside = ( |
/* 侧边栏切换动画开始 */ |
||||||
<aside |
.sidebar-enter-active { |
||||||
class={{'aside': true, 'collapse': this.collapse}} |
transition: all 0.2s; |
||||||
on-mouseleave={() => this.mouseOutside = true} |
} |
||||||
on-mouseenter={() => this.mouseOutside = false} |
|
||||||
> |
|
||||||
{asideGetters.showLogo && <logo collapse={this.collapse}/>} |
|
||||||
<el-menu |
|
||||||
ref="menu" |
|
||||||
class="el-menu--vertical" |
|
||||||
collapse={this.collapse} |
|
||||||
collapse-transition={false} |
|
||||||
default-active={this.activeMenu} |
|
||||||
unique-opened={asideGetters.uniqueOpen} |
|
||||||
on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}} |
|
||||||
> |
|
||||||
{this.menus.map(m => ( |
|
||||||
<nav-menu-item |
|
||||||
menu={m} |
|
||||||
show-parent={asideGetters.showParentOnCollapse} |
|
||||||
collapse={this.collapse} |
|
||||||
show-icon-max-depth={1} |
|
||||||
/> |
|
||||||
))} |
|
||||||
</el-menu> |
|
||||||
</aside> |
|
||||||
) |
|
||||||
|
|
||||||
if (this.renderInDrawer) { |
.sidebar-enter, |
||||||
return ( |
.sidebar-leave-active { |
||||||
<el-drawer |
opacity: 0; |
||||||
visible={this.show} |
transform: translateY(30px) skewY(10deg) |
||||||
with-header={false} |
} |
||||||
direction="ltr" |
|
||||||
size="auto" |
|
||||||
on-close={() => asideMutations.close()} |
|
||||||
> |
|
||||||
{aside} |
|
||||||
</el-drawer> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return aside |
.sidebar-leave-active { |
||||||
} |
position: absolute; |
||||||
} |
} |
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" src="./style.scss"></style> |
/* 侧边栏切换动画结束 */ |
||||||
|
</style> |
||||||
|
|||||||
@ -1,101 +0,0 @@ |
|||||||
@import "~@/asset/style/variables.scss"; |
|
||||||
|
|
||||||
.navbar { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
flex-wrap: nowrap; |
|
||||||
height: $nav-height; |
|
||||||
padding: 0 12px; |
|
||||||
transition: height .3s ease-in-out; |
|
||||||
position: relative; |
|
||||||
z-index: 9; |
|
||||||
background-color: #ffffff; |
|
||||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); |
|
||||||
|
|
||||||
> div { |
|
||||||
display: flex; |
|
||||||
flex-wrap: nowrap; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.navbar-icon { |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
|
|
||||||
.navbar-item { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding: 0 8px; |
|
||||||
color: #5a5e66; |
|
||||||
transition: background .3s; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background: rgba(0, 0, 0, .025) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-wrapper { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
span { |
|
||||||
margin-right: 5px; |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//顶部水平菜单 |
|
||||||
.el-menu--horizontal .el-menu, |
|
||||||
.el-menu--horizontal.el-menu { |
|
||||||
font-size: 14px; |
|
||||||
|
|
||||||
.icon { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
//图标和文字的间隔 |
|
||||||
.icon + .menu-item-content { |
|
||||||
margin-left: $menu-icon-text-gap; |
|
||||||
} |
|
||||||
|
|
||||||
//菜单的文字以及hover颜色 |
|
||||||
.el-menu-item, |
|
||||||
.el-submenu__title { |
|
||||||
color: $head-menu-item-color; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: $head-menu-item-hover-color; |
|
||||||
} |
|
||||||
|
|
||||||
> span { |
|
||||||
max-width: 100px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//submenu的右侧箭头会稍微偏上，不懂为啥 |
|
||||||
.el-submenu__icon-arrow { |
|
||||||
margin-top: -4px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//顶部菜单的顶级节点 |
|
||||||
.el-menu--horizontal.el-menu { |
|
||||||
//不显示折叠展开按钮 |
|
||||||
> .el-submenu > .el-submenu__title > .el-submenu__icon-arrow { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
//顶级节点的高度以及hover颜色 |
|
||||||
> .el-menu-item, |
|
||||||
> .el-submenu > .el-submenu__title { |
|
||||||
height: $nav-height; |
|
||||||
line-height: $nav-height; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border-bottom: 2px solid $head-menu-item-hover-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue