mirror of https://github.com/halo-dev/halo
124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<template>
|
|
<transition name="showHeader">
|
|
<div v-if="visible" class="header-animat">
|
|
<a-layout-header
|
|
v-if="visible"
|
|
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
|
|
:style="{ padding: '0' }">
|
|
<div v-if="mode === 'sidemenu'" class="header">
|
|
<a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
|
|
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
|
|
<user-menu></user-menu>
|
|
</div>
|
|
<div v-else :class="['top-nav-header-index', theme]">
|
|
<div class="header-index-wide">
|
|
<div class="header-index-left">
|
|
<logo class="top-nav-header" :show-title="device !== 'mobile'"/>
|
|
<s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
|
|
<a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
|
|
</div>
|
|
<user-menu class="header-index-right"></user-menu>
|
|
</div>
|
|
</div>
|
|
</a-layout-header>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import UserMenu from '../Tools/UserMenu'
|
|
import SMenu from '../Menu/'
|
|
import Logo from '../Tools/Logo'
|
|
import { mixin } from '@/utils/mixin'
|
|
|
|
export default {
|
|
name: 'GlobalHeader',
|
|
components: {
|
|
UserMenu,
|
|
SMenu,
|
|
Logo
|
|
},
|
|
mixins: [mixin],
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
// sidemenu, topmenu
|
|
default: 'sidemenu'
|
|
},
|
|
menus: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
theme: {
|
|
type: String,
|
|
required: false,
|
|
default: 'dark'
|
|
},
|
|
collapsed: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
device: {
|
|
type: String,
|
|
required: false,
|
|
default: 'desktop'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: true,
|
|
oldScrollTop: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
document.body.addEventListener('scroll', this.handleScroll, { passive: true })
|
|
},
|
|
methods: {
|
|
handleScroll() {
|
|
if (!this.autoHideHeader) {
|
|
return
|
|
}
|
|
|
|
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
|
|
if (!this.ticking) {
|
|
this.ticking = true
|
|
requestAnimationFrame(() => {
|
|
if (this.oldScrollTop > scrollTop) {
|
|
this.visible = true
|
|
} else if (scrollTop > 300 && this.visible) {
|
|
this.visible = false
|
|
} else if (scrollTop < 300 && !this.visible) {
|
|
this.visible = true
|
|
}
|
|
this.oldScrollTop = scrollTop
|
|
this.ticking = false
|
|
})
|
|
}
|
|
},
|
|
toggle() {
|
|
this.$emit('toggle')
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
document.body.removeEventListener('scroll', this.handleScroll, true)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.header-animat{
|
|
position: relative;
|
|
z-index: 999;
|
|
}
|
|
.showHeader-enter-active {
|
|
transition: all 0.25s ease;
|
|
}
|
|
.showHeader-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
.showHeader-enter, .showHeader-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|