layout修改

vue/src/layout/component/Aside/component/Mask.vue

@@ -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>

vue/src/layout/component/Aside/index.vue

@@ -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,
+                'collapse': this.collapse,
-                'hide-sidebar': this.hideSidebar
+                '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: {
+        hideSidebar(v) {
-            immediate: true,
-            handler(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() {
+    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}
             >

vue/src/layout/component/Aside/style.scss

@@ -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;
+}
+
 
 
 

vue/src/layout/index.vue

@@ -1,60 +1,64 @@
-<template>
+<script type="text/jsx">
-    <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>
 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 mainGetters, mutations as mainMutations} from "@/layout/store/main"
-import {getters as settingGetters, mutations as settingMutations} from "@/layout/store/setting"
+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() {
+        $_resizeHandler() {
-            settingMutations.sidebarCollapse(true)
+            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;

vue/src/layout/mixin/resize.js

@@ -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)
-        })
-    }
-}