123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <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>
- <multi-tab :class="[fixedHeader ? 'ant-header-fixedMultiTab' : 'ant-header-multiTab',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]" v-if="multiTab"></multi-tab>
- </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.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">
- @import '../index.less';
- .header-animat{
- position: relative;
- z-index: @ant-global-header-zindex;
- }
- .showHeader-enter-active {
- transition: all 0.25s ease;
- }
- .showHeader-leave-active {
- transition: all 0.5s ease;
- }
- .showHeader-enter, .showHeader-leave-to {
- opacity: 0;
- }
- </style>
|