From 8dedccbddf7cc7a27e5029456def178d227b69da Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Mon, 24 Aug 2020 11:48:48 +0800
Subject: [PATCH] =?UTF-8?q?header=E6=94=B9=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/layout/component/Header.vue | 62 ++++++++++-------------------
 1 file changed, 22 insertions(+), 40 deletions(-)

diff --git a/vue/src/layout/component/Header.vue b/vue/src/layout/component/Header.vue
index ffd6e64..b5f1ebb 100644
--- a/vue/src/layout/component/Header.vue
+++ b/vue/src/layout/component/Header.vue
@@ -1,16 +1,4 @@
-<template>
-    <header
-        :class="{'header-container':true,'hide-header':hideHeader}"
-        @mouseenter="() => this.mouseOutside = false"
-        @mouseleave="() => this.mouseOutside = true"
-    >
-        <v-navbar @menu-show="e => this.navbarMenuShow = e"/>
-
-        <tags-view v-if="useTagsView" @menu-show="e => this.tagsViewMenuShow = e"/>
-    </header>
-</template>
-
-<script>
+<script type="text/jsx">
 import {mapState} from 'vuex'
 import VNavbar from './Navbar'
 import TagsView from './TagsView'
@@ -24,8 +12,7 @@ export default {
         return {
             mouseOutside: true,
             navbarMenuShow: false,
-            tagsViewMenuShow: false,
-            appMain: null
+            tagsViewMenuShow: false
         }
     },
 
@@ -56,11 +43,9 @@ export default {
         moveEvent(e) {
             if (e.clientY <= 15) this.mouseOutside = false
         },
-
         addEvent() {
             this.appMain.addEventListener('mousemove', this.moveEvent)
         },
-
         removeEvent() {
             this.appMain.removeEventListener('mousemove', this.moveEvent)
         }
@@ -71,29 +56,26 @@ export default {
         if (this.headerAutoHidden) this.addEvent()
 
         this.$once('hook:beforeDestroy', this.removeEvent)
-    }
-}
-</script>
-
-<style lang="scss">
-@import "~@/asset/style/variables.scss";
-
-.has-tags-view .header-container {
-    height: calc(#{$nav-height} + #{$tags-view-height});
-}
-
-.header-container {
-    position: relative;
-    height: $nav-height;
-    transition: height .3s ease-in-out;
-    flex-shrink: 0;
-
-    &.hide-header {
-        height: 0;
+    },
 
-        > .navbar {
-            height: 0;
-        }
+    render() {
+        const mouseCtrlFactory = (enter = true) => () => this.mouseOutside = !enter
+        const menuCtrlFactory = key => e => this[key] = e
+
+        return (
+            <el-collapse-transition>
+                <header
+                    v-show={!this.hideHeader}
+                    class="header-container"
+                    on-mouseenter={mouseCtrlFactory()}
+                    on-mouseleave={mouseCtrlFactory(false)}
+                >
+                    <v-navbar on-menu-show={menuCtrlFactory('navbarMenuShow')}/>
+
+                    {this.useTagsView && <tags-view on-menu-show={menuCtrlFactory('tagsViewMenuShow')}/>}
+                </header>
+            </el-collapse-transition>
+        )
     }
 }
-</style>
+</script>