| commit | author | age | ||
| 9bcb19 | 1 | <template> |
| I | 2 | <transition name="showHeader"> |
| 3 | <div v-if="visible" class="header-animat"> | |
| 4 | <a-layout-header | |
| 5 | v-if="visible" | |
| 6 | :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]" | |
| 7 | :style="{ padding: '0', height: '55px' }"> | |
| 8 | <div v-if="mode === 'sidemenu'" class="header"> | |
| 9 | ||
| 10 | <a-menu | |
| 11 | style="height: 55px; border-bottom: 0px;" | |
| 12 | mode="horizontal" | |
| 13 | :default-selected-keys="this.defApp" | |
| 14 | > | |
| 15 | <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/> | |
| 16 | <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" style="padding-left: 20px; padding-right: 20px;"/> | |
| 17 | ||
| 18 | <a-menu-item v-for="(item) in userInfo.apps" :key="item.code" style="top:0px; line-height: 55px; padding-left: 10px; padding-right: 10px" @click="switchApp(item.code)"> | |
| 19 | {{ item.name }} | |
| 20 | </a-menu-item> | |
| 21 | <user-menu></user-menu> | |
| 22 | </a-menu> | |
| 23 | ||
| 24 | </div> | |
| 25 | <div v-else :class="['top-nav-header-index', theme]"> | |
| 26 | ||
| 27 | <div class="header-index-wide"> | |
| 28 | <div class="header-index-left"> | |
| 29 | <logo class="top-nav-header" :show-title="device !== 'mobile'"/> | |
| 30 | <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" /> | |
| 31 | <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" /> | |
| 32 | </div> | |
| 33 | <user-menu class="header-index-right"></user-menu> | |
| 34 | </div> | |
| 35 | </div> | |
| 36 | </a-layout-header> | |
| 37 | </div> | |
| 38 | </transition> | |
| 39 | </template> | |
| 40 | ||
| 41 | <script> | |
| 42 | import UserMenu from '../tools/UserMenu' | |
| 43 | import SMenu from '../Menu/' | |
| 44 | import Logo from '../tools/Logo' | |
| 45 | import { mixin } from '@/utils/mixin' | |
| 46 | import { mapActions, mapGetters } from 'vuex' | |
| 47 | import { ALL_APPS_MENU } from '@/store/mutation-types' | |
| 48 | import Vue from 'vue' | |
| 49 | import { message } from 'ant-design-vue/es' | |
| 50 | ||
| 51 | export default { | |
| 52 | name: 'GlobalHeader', | |
| 53 | components: { | |
| 54 | UserMenu, | |
| 55 | SMenu, | |
| 56 | Logo | |
| 57 | }, | |
| 58 | computed: { | |
| 59 | ...mapGetters(['userInfo']) | |
| 60 | }, | |
| 61 | created () { | |
| 62 | this.defApp.push(Vue.ls.get(ALL_APPS_MENU)[0].code) | |
| 63 | }, | |
| 64 | mixins: [mixin], | |
| 65 | props: { | |
| 66 | mode: { | |
| 67 | type: String, | |
| 68 | // sidemenu, topmenu | |
| 69 | default: 'sidemenu' | |
| 70 | }, | |
| 71 | menus: { | |
| 72 | type: Array, | |
| 73 | required: true | |
| 74 | }, | |
| 75 | theme: { | |
| 76 | type: String, | |
| 77 | required: false, | |
| 78 | default: 'dark' | |
| 79 | }, | |
| 80 | collapsed: { | |
| 81 | type: Boolean, | |
| 82 | required: false, | |
| 83 | default: false | |
| 84 | }, | |
| 85 | device: { | |
| 86 | type: String, | |
| 87 | required: false, | |
| 88 | default: 'desktop' | |
| 89 | } | |
| 90 | }, | |
| 91 | data () { | |
| 92 | return { | |
| 93 | visible: true, | |
| 94 | oldScrollTop: 0, | |
| 95 | defApp: [] | |
| 96 | } | |
| 97 | }, | |
| 98 | mounted () { | |
| 99 | document.addEventListener('scroll', this.handleScroll, { passive: true }) | |
| 100 | }, | |
| 101 | methods: { | |
| 102 | ...mapActions(['MenuChange']), | |
| 103 | ||
| 104 | /** | |
| 105 | * 应用切换 | |
| 106 | */ | |
| 107 | switchApp (appCode) { | |
| 108 | this.defApp = [] | |
| 109 | const applicationData = this.userInfo.apps.filter(item => item.code === appCode) | |
| 110 | const hideMessage = message.loading('正在切换应用！', 0) | |
| 111 | this.MenuChange(applicationData[0]).then((res) => { | |
| 112 | hideMessage() | |
| 113 | // eslint-disable-next-line handle-callback-err | |
| 114 | }).catch((err) => { | |
| 115 | message.error('应用切换异常') | |
| 116 | }) | |
| 117 | }, | |
| 118 | handleScroll () { | |
| 119 | if (!this.autoHideHeader) { | |
| 120 | return | |
| 121 | } | |
| 122 | ||
| 123 | const scrollTop = document.body.scrollTop + document.documentElement.scrollTop | |
| 124 | if (!this.ticking) { | |
| 125 | this.ticking = true | |
| 126 | requestAnimationFrame(() => { | |
| 127 | if (this.oldScrollTop > scrollTop) { | |
| 128 | this.visible = true | |
| 129 | } else if (scrollTop > 300 && this.visible) { | |
| 130 | this.visible = false | |
| 131 | } else if (scrollTop < 300 && !this.visible) { | |
| 132 | this.visible = true | |
| 133 | } | |
| 134 | this.oldScrollTop = scrollTop | |
| 135 | this.ticking = false | |
| 136 | }) | |
| 137 | } | |
| 138 | }, | |
| 139 | toggle () { | |
| 140 | this.$emit('toggle') | |
| 141 | } | |
| 142 | }, | |
| 143 | beforeDestroy () { | |
| 144 | document.body.removeEventListener('scroll', this.handleScroll, true) | |
| 145 | } | |
| 146 | } | |
| 147 | </script> | |
| 148 | ||
| 149 | <style lang="less"> | |
| 150 | @import '../index.less'; | |
| 151 | ||
| 152 | .header-animat{ | |
| 153 | position: relative; | |
| 154 | z-index: @ant-global-header-zindex; | |
| 155 | } | |
| 156 | .showHeader-enter-active { | |
| 157 | transition: all 0.25s ease; | |
| 158 | } | |
| 159 | .showHeader-leave-active { | |
| 160 | transition: all 0.5s ease; | |
| 161 | } | |
| 162 | .showHeader-enter, .showHeader-leave-to { | |
| 163 | opacity: 0; | |
| 164 | } | |
| 165 | </style> | |
