cd-work-flow-web/src/components/page/GlobalHeader.vue

<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    v-if="!headerBarFixed"
    :class="[
      fixedHeader && 'ant-header-fixedHeader',
      sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
    ]"
    :style="{ padding: '0' }"
  >
    <div v-if="mode === 'sidemenu'" class="header" :class="theme">
      <a-icon
        v-if="device === 'mobile'"
        class="trigger"
        :type="collapsed ? 'menu-fold' : 'menu-unfold'"
        @click="toggle"
      ></a-icon>
      <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />

      <span v-if="device === 'desktop'">
        <!-- 欢迎进入 Jeecg-Boot 企业级快速开发平台 -->
      </span>
      <span v-else>
        <!-- Jeecg-Boot -->
      </span>

      <user-menu :theme="theme" />
      <a href="http://220.191.168.86:18002/dashboard/analysis"  target="_top" style="color:white;float: right;">切换单证系统</a>

    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
          <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader" />
          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
            <!-- mode="horizontal -->
            <s-menu mode="vertical" :menu="menus" :theme="theme"></s-menu>
          </div>
          <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"></a-icon>
        </div>
        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Logo from '../tools/Logo'

import { mixin } from '@/utils/mixin.js'

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 {
            headerBarFixed: false,
            // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
            topMenuStyle: {
                headerIndexLeft: {},
                topNavHeader: {},
                headerIndexRight: {},
                topSmenuStyle: {}
            }
        }
    },
    watch: {
    /** 监听设备变化 */
        device () {
            if (this.mode === 'topmenu') {
                this.buildTopMenuStyle()
            }
        },
        /** 监听导航栏模式变化 */
        mode (newVal) {
            if (newVal === 'topmenu') {
                this.buildTopMenuStyle()
            }
        }
    },
    // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
        // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
        if (this.mode === 'topmenu') {
            this.buildTopMenuStyle()
        }
    // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    },
    methods: {
        handleScroll () {
            if (this.autoHideHeader) {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if (scrollTop > 100) {
                    this.headerBarFixed = true
                } else {
                    this.headerBarFixed = false
                }
            } else {
                this.headerBarFixed = false
            }
        },
        toggle () {
            this.$emit('toggle')
        },
        // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
        buildTopMenuStyle () {
            if (this.mode === 'topmenu') {
                if (this.device === 'mobile') {
                    // 手机端需要清空样式，否则显示会错乱
                    this.topMenuStyle.topNavHeader = {}
                    this.topMenuStyle.topSmenuStyle = {}
                    this.topMenuStyle.headerIndexRight = {}
                    this.topMenuStyle.headerIndexLeft = {}
                } else {
                    let rightWidth = '360px'
                    this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
                    this.topMenuStyle.topSmenuStyle = { width: 'calc(100% - 165px)' }
                    this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
                    this.topMenuStyle.headerIndexLeft = { width: `calc(100% - ${rightWidth})` }
                }
            }
        }
    // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    }
}
</script>

<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

@height: 59px;

.layout {
  .top-nav-header-index {
    .header-index-wide {
      margin-left: 10px;

      .ant-menu.ant-menu-horizontal {
        height: @height;
        line-height: @height;
      }
    }
    .trigger {
      line-height: 14px;
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .header {
    z-index: 2;
    color: white;
    height: @height;
    background-color: @primary-color !important;
    transition: background 300ms;

    /* dark 样式 */
    &.dark {
      color: #000000;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      background-color: white !important;
    }
  }

  .header,
  .top-nav-header-index {
    &.dark .trigger:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

.ant-layout-header {
  height: @height;
  line-height: @height;
}

// 技能博物馆
// .layout .header[data-v-6d229060] {
//     background-color: #6bc5f3 !important;
// }

/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
</style>