18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

layout修改

Browse Source
master
toesbieya 6 years ago
parent 31732fdf1f
commit f2e869d650
5 changed files with 115 additions and 83 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 13
      vue/src/layout/component/Aside/component/Mask.vue
  2. 68
      vue/src/layout/component/Aside/index.vue
  3. 16
      vue/src/layout/component/Aside/style.scss
  4. 76
      vue/src/layout/index.vue
  5. 25
      vue/src/layout/mixin/resize.js

13
vue/src/layout/component/Aside/component/Mask.vue
Unescape View File

@ -0,0 +1,13 @@
<script type="text/jsx">
export default {
data: () => ({show: false}),
render() {
return (
<transition name="el-fade-in-linear">
{this.show && <div class="aside-hidden-mask" on-click={this.onClick}/>}
</transition>
)
}
}
</script>

68
vue/src/layout/component/Aside/index.vue
Unescape View File

@ -1,8 +1,10 @@
<script type="text/jsx">
import Vue from 'vue'
import actionOnSelectMenuMixin from "@/layout/mixin/actionOnSelectMenu"
import {getters as mainGetters} from "@/layout/store/main"
import {getters as settingGetters, mutations as settingMutations} from "@/layout/store/setting"
import Logo from './component/Logo'
import Mask from "./component/Mask"
import SidebarItem from './component/SidebarItem'
export default {
@ -47,12 +49,17 @@ export default {
|| this.sidebarCollapse && this.device === 'mobile'
},
sidebarClass() {
//是否显示移动端展开侧边栏时的遮罩
showHiddenMask() {
return !this.sidebarCollapse && this.device === 'mobile'
},
asideClass() {
return {
'sidebar-container': true,
'aside': true,
'mobile': this.device === 'mobile',
'collapse-sidebar': this.collapse,
'hide-sidebar': this.hideSidebar
'collapse': this.collapse,
'hide': this.hideSidebar
}
}
},
@ -78,6 +85,15 @@ export default {
}
},
//切换至移动端时收起侧边栏
device: {
immediate: true,
handler(v) {
v === 'mobile' && this.collapseSidebar()
}
},
//顶部菜单改变时获取侧边栏菜单，并重设高亮项
activeRootMenu: {
immediate: true,
handler(v) {
@ -94,13 +110,14 @@ export default {
},
//设置了侧边栏自动隐藏后，根据状态添加或移除鼠标移动事件
hideSidebar: {
immediate: true,
handler(v) {
if (!this.sidebarAutoHidden) return
const method = `${v ? 'add' : 'remove'}EventListener`
document[method]('mousemove', this.moveEvent)
}
hideSidebar(v) {
if (!this.sidebarAutoHidden) return
const method = `${v ? 'add' : 'remove'}EventListener`
document[method]('mousemove', this.moveEvent)
},
showHiddenMask(v) {
this.maskInstance.show = v
}
},
@ -128,11 +145,34 @@ export default {
this.device === 'mobile' && settingMutations.sidebarCollapse(true)
jump && this.actionOnSelectMenu(index)
},
collapseSidebar(e) {
if (e) {
e.preventDefault()
e.stopPropagation()
}
settingMutations.sidebarCollapse(true)
}
},
beforeDestroy() {
document.removeEventListener('mousemove', this.moveEvent)
mounted() {
if (this.sidebarAutoHidden) {
document.addEventListener('mousemove', this.moveEvent)
}
//插入遮罩组件
const MaskConstructor = Vue.extend(Mask)
this.maskInstance = new MaskConstructor().$mount()
this.maskInstance.onClick = this.collapseSidebar
document.body.appendChild(this.maskInstance.$el)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('mousemove', this.moveEvent)
document.body.removeChild(this.maskInstance.$el)
this.maskInstance.$destroy()
})
},
render() {
@ -161,7 +201,7 @@ export default {
return (
<aside
class={this.sidebarClass}
class={this.asideClass}
on-mouseenter={() => this.mouseOutside = false}
on-mouseleave={() => this.mouseOutside = true}
>

16
vue/src/layout/component/Aside/style.scss
Unescape View File

@ -2,7 +2,7 @@
$iconSize: 16px;
.sidebar-container {
.aside {
display: flex;
flex-direction: column;
width: $side-bar-width;
@ -20,7 +20,7 @@ $iconSize: 16px;
}
//折叠设置
&.collapse-sidebar {
&.collapse {
width: $iconSize + 20px * 2;
.sidebar-item-content {
@ -29,7 +29,7 @@ $iconSize: 16px;
}
//自动隐藏
&.hide-sidebar {
&.hide {
width: 0;
pointer-events: none;
transform: translateX(-$side-bar-width);
@ -134,6 +134,16 @@ $iconSize: 16px;
}
}
.aside-hidden-mask {
background: rgba(0, 0, 0, .5);
backdrop-filter: blur(10px);
height: 100vh;
width: 100vw;
top: 0;
position: fixed;
z-index: 9;
}

76
vue/src/layout/index.vue
Unescape View File

@ -1,59 +1,63 @@
<template>
<section class="app-wrapper">
<v-aside/>
<section :class="containerClass">
<v-header/>
<v-main/>
</section>
<!--移动端侧边栏展开时的遮罩-->
<transition name="el-fade-in-linear">
<div v-if="showSidebarMask" class="drawer-bg" @click.stop.prevent="collapseSidebar"/>
</transition>
</section>
</template>
<script>
<script type="text/jsx">
import offlineMixin from './mixin/offline'
import resizeMixin from './mixin/resize'
import VAside from './component/Aside'
import VHeader from './component/Header'
import VMain from './component/Main'
import {getters as mainGetters} from "@/layout/store/main"
import {getters as settingGetters, mutations as settingMutations} from "@/layout/store/setting"
import {getters as mainGetters, mutations as mainMutations} from "@/layout/store/main"
import {getters as settingGetters} from "@/layout/store/setting"
import {isMobile} from "@/util/browser"
import {debounce} from "@/util"
export default {
name: 'Layout',
mixins: [offlineMixin, resizeMixin],
mixins: [offlineMixin],
components: {VAside, VHeader, VMain},
computed: {
device: () => mainGetters.device,
hasNav: () => mainGetters.hasNav,
useTagsView: () => settingGetters.useTagsView,
sidebarCollapse: () => settingGetters.sidebarCollapse,
containerClass() {
return {
'main-container': true,
'has-nav': this.hasNav,
'has-tags-view': this.useTagsView
}
},
showSidebarMask() {
return !this.sidebarCollapse && this.device === 'mobile'
}
},
methods: {
collapseSidebar() {
settingMutations.sidebarCollapse(true)
$_resizeHandler() {
if (!document.hidden) {
const mobile = isMobile()
mainMutations.device(mobile ? 'mobile' : 'pc')
}
}
},
mounted() {
this.$_resizeHandler = debounce(this.$_resizeHandler)
this.$_resizeHandler()
window.addEventListener('resize', this.$_resizeHandler)
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.$_resizeHandler)
})
},
render() {
return (
<section class="app-wrapper">
<v-aside/>
<section class={this.containerClass}>
<v-header/>
<v-main/>
</section>
</section>
)
}
}
</script>
@ -65,16 +69,6 @@ export default {
height: 100%;
width: 100%;
.drawer-bg {
background: rgba(0, 0, 0, .5);
backdrop-filter: blur(10px);
width: 100%;
top: 0;
height: 100%;
position: fixed;
z-index: 9;
}
.main-container {
display: flex;
flex: 1;

25
vue/src/layout/mixin/resize.js
Unescape View File

@ -1,25 +0,0 @@
import {mutations as mainMutations} from "@/layout/store/main"
import {debounce} from '@/util'
import {isMobile} from "@/util/browser"
export default {
methods: {
$_resizeHandler() {
if (!document.hidden) {
const mobile = isMobile()
mainMutations.device(mobile ? 'mobile' : 'pc')
mobile && this.collapseSidebar()
}
}
},
mounted() {
this.$_resizeHandler = debounce(this.$_resizeHandler)
this.$_resizeHandler()
window.addEventListener('resize', this.$_resizeHandler)
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.$_resizeHandler)
})
}
}
Write Preview
Loading…
Cancel
Save