GlobalHeader.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
  3. <a-layout-header
  4. v-if="!headerBarFixed"
  5. :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
  6. :style="{ padding: '0' }">
  7. <div v-if="mode === 'sidemenu'" class="header" :class="theme">
  8. <a-icon
  9. v-if="device==='mobile'"
  10. class="trigger"
  11. :type="collapsed ? 'menu-fold' : 'menu-unfold'"
  12. @click="toggle"></a-icon>
  13. <a-icon
  14. v-else
  15. class="trigger"
  16. :type="collapsed ? 'menu-unfold' : 'menu-fold'"
  17. @click.native="toggle"/>
  18. <!-- <span v-if="device === 'desktop'">欢迎使用汇创投放助手</span> -->
  19. <!-- <span v-else>汇创投放助手</span> -->
  20. <user-menu :theme="theme"/>
  21. </div>
  22. <!-- 顶部导航栏模式 -->
  23. <div v-else :class="['top-nav-header-index', theme]">
  24. <div class="header-index-wide">
  25. <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
  26. <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
  27. <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
  28. <s-menu
  29. mode="horizontal"
  30. :menu="menus"
  31. :theme="theme"></s-menu>
  32. </div>
  33. <a-icon
  34. v-else
  35. class="trigger"
  36. :type="collapsed ? 'menu-fold' : 'menu-unfold'"
  37. @click="toggle"></a-icon>
  38. </div>
  39. <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
  40. </div>
  41. </div>
  42. </a-layout-header>
  43. </template>
  44. <script>
  45. import UserMenu from '../tools/UserMenu'
  46. import SMenu from '../menu/'
  47. import Logo from '../tools/Logo'
  48. import {mixin} from '@/utils/mixin.js'
  49. export default {
  50. name: 'GlobalHeader',
  51. components: {
  52. UserMenu,
  53. SMenu,
  54. Logo
  55. },
  56. mixins: [mixin],
  57. props: {
  58. mode: {
  59. type: String,
  60. // sidemenu, topmenu
  61. default: 'sidemenu'
  62. },
  63. menus: {
  64. type: Array,
  65. required: true
  66. },
  67. theme: {
  68. type: String,
  69. required: false,
  70. default: 'dark'
  71. },
  72. collapsed: {
  73. type: Boolean,
  74. required: false,
  75. default: false
  76. },
  77. device: {
  78. type: String,
  79. required: false,
  80. default: 'desktop'
  81. }
  82. },
  83. data() {
  84. return {
  85. headerBarFixed: false,
  86. //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  87. topMenuStyle: {
  88. headerIndexLeft: {},
  89. topNavHeader: {},
  90. headerIndexRight: {},
  91. topSmenuStyle: {}
  92. }
  93. }
  94. },
  95. watch: {
  96. /** 监听设备变化 */
  97. device() {
  98. if (this.mode === 'topmenu') {
  99. this.buildTopMenuStyle()
  100. }
  101. },
  102. /** 监听导航栏模式变化 */
  103. mode(newVal) {
  104. if (newVal === 'topmenu') {
  105. this.buildTopMenuStyle()
  106. }
  107. }
  108. },
  109. //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  110. mounted() {
  111. window.addEventListener('scroll', this.handleScroll)
  112. //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  113. if (this.mode === 'topmenu') {
  114. this.buildTopMenuStyle()
  115. }
  116. //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  117. },
  118. methods: {
  119. handleScroll() {
  120. if (this.autoHideHeader) {
  121. let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  122. if (scrollTop > 100) {
  123. this.headerBarFixed = true
  124. } else {
  125. this.headerBarFixed = false
  126. }
  127. } else {
  128. this.headerBarFixed = false
  129. }
  130. },
  131. toggle() {
  132. this.$emit('toggle')
  133. },
  134. //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  135. buildTopMenuStyle() {
  136. if (this.mode === 'topmenu') {
  137. if (this.device === 'mobile') {
  138. // 手机端需要清空样式,否则显示会错乱
  139. this.topMenuStyle.topNavHeader = {}
  140. this.topMenuStyle.topSmenuStyle = {}
  141. this.topMenuStyle.headerIndexRight = {}
  142. this.topMenuStyle.headerIndexLeft = {}
  143. } else {
  144. let rightWidth = '360px'
  145. this.topMenuStyle.topNavHeader = {'min-width': '165px'}
  146. this.topMenuStyle.topSmenuStyle = {'width': 'calc(100% - 165px)'}
  147. this.topMenuStyle.headerIndexRight = {'min-width': rightWidth}
  148. this.topMenuStyle.headerIndexLeft = {'width': `calc(100% - ${rightWidth})`}
  149. }
  150. }
  151. }
  152. //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  153. }
  154. }
  155. </script>
  156. <style lang="scss" scoped>
  157. /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  158. $height: 59px;
  159. .layout .header .user-wrapper .action .anticon, .layout .top-nav-header-index .user-wrapper .action .anticon {
  160. color: #999;
  161. }
  162. .layout .header .user-wrapper .action .anticon, .layout .top-nav-header-index .user-wrapper .action .anticon {
  163. color: #999;
  164. }
  165. .layout {
  166. .top-nav-header-index {
  167. .header-index-wide {
  168. margin-left: 10px;
  169. .ant-menu.ant-menu-horizontal {
  170. height: $height;
  171. line-height: $height;
  172. }
  173. }
  174. .trigger {
  175. line-height: 48px;
  176. font-size: 17px;
  177. &:hover {
  178. background: rgba(0, 0, 0, 0.05);
  179. }
  180. }
  181. }
  182. .header {
  183. z-index: 2;
  184. color: #999;
  185. height: $height;
  186. background-color: #1890ff;
  187. transition: background 300ms;
  188. /* dark 样式 */
  189. &.dark {
  190. color: #000000;
  191. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  192. background-color: white !important;
  193. }
  194. }
  195. .header, .top-nav-header-index {
  196. &.dark .trigger:hover {
  197. background: rgba(0, 0, 0, 0.05);
  198. }
  199. }
  200. }
  201. .ant-layout-header {
  202. height: $height;
  203. line-height: $height;
  204. }
  205. /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  206. </style>