| 提交 | 用户 | age | ||
| 0692b4 | 1 | import './LayoutMultipleHeader.less'; |
| V | 2 | |
| 3 | import { defineComponent, unref, computed, ref, watch, nextTick, CSSProperties } from 'vue'; | |
| 4 | ||
| 5 | import LayoutHeader from './LayoutHeader'; | |
| 27e50b | 6 | import MultipleTabs from '../tabs/index.vue'; |
| 0692b4 | 7 | |
| V | 8 | import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
| 9 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
| 10 | import { useFullContent } from '/@/hooks/web/useFullContent'; | |
| 11 | import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; | |
| 12 | import { useLayoutContext } from '../useLayoutContext'; | |
| 13 | ||
| 14 | export default defineComponent({ | |
| 15 | name: 'LayoutMultipleHeader', | |
| 16 | setup() { | |
| 17 | const placeholderHeightRef = ref(0); | |
| 18 | const fullHeaderHeightRef = ref(0); | |
| 19 | const headerElRef = ref<ComponentRef>(null); | |
| 20 | const tabElRef = ref<ComponentRef>(null); | |
| 21 | ||
| 22 | const injectValue = useLayoutContext(); | |
| 23 | ||
| 1ef49e | 24 | const { getCalcContentWidth } = useMenuSetting(); |
| 0692b4 | 25 | |
| V | 26 | const { |
| 27 | getFixed, | |
| 28 | getShowInsetHeaderRef, | |
| 29 | getShowFullHeaderRef, | |
| 30 | getShowHeader, | |
| 31 | getUnFixedAndFull, | |
| 1bc237 | 32 | getHeaderTheme, |
| 0692b4 | 33 | } = useHeaderSetting(); |
| V | 34 | |
| 35 | const { getFullContent } = useFullContent(); | |
| 36 | ||
| 37 | const { getShowMultipleTab } = useMultipleTabSetting(); | |
| 38 | ||
| 39 | const showTabsRef = computed(() => { | |
| 40 | return unref(getShowMultipleTab) && !unref(getFullContent); | |
| 41 | }); | |
| 42 | ||
| 6e03e0 | 43 | const getPlaceholderDomStyle = computed( |
| V | 44 | (): CSSProperties => { |
| 45 | return { | |
| 46 | height: `${unref(placeholderHeightRef)}px`, | |
| 47 | }; | |
| 48 | } | |
| 49 | ); | |
| 0692b4 | 50 | |
| V | 51 | const getIsShowPlaceholderDom = computed(() => { |
| 52 | return unref(getFixed) || unref(getShowFullHeaderRef); | |
| 53 | }); | |
| 54 | ||
| 6e03e0 | 55 | const getWrapStyle = computed( |
| V | 56 | (): CSSProperties => { |
| 57 | const style: CSSProperties = {}; | |
| 58 | if (unref(getFixed)) { | |
| 1ef49e | 59 | style.width = unref(injectValue.isMobile) ? '100%' : unref(getCalcContentWidth); |
| 6e03e0 | 60 | } |
| V | 61 | if (unref(getShowFullHeaderRef)) { |
| 62 | style.top = `${unref(fullHeaderHeightRef)}px`; | |
| 63 | } | |
| 64 | return style; | |
| 0692b4 | 65 | } |
| 6e03e0 | 66 | ); |
| 0692b4 | 67 | |
| V | 68 | const getIsFixed = computed(() => { |
| 69 | return unref(getFixed) || unref(getShowFullHeaderRef); | |
| 70 | }); | |
| 71 | ||
| 72 | watch( | |
| 73 | () => [ | |
| 74 | unref(getFixed), | |
| 75 | unref(getShowFullHeaderRef), | |
| 76 | unref(getShowHeader), | |
| 77 | unref(getShowMultipleTab), | |
| 78 | ], | |
| 79 | () => { | |
| 80 | if (unref(getUnFixedAndFull)) return; | |
| 81 | nextTick(() => { | |
| 82 | const headerEl = unref(headerElRef)?.$el; | |
| 83 | const tabEl = unref(tabElRef)?.$el; | |
| 189914 | 84 | const fullHeaderEl = unref(injectValue.fullHeader)?.$el; |
| 0692b4 | 85 | |
| V | 86 | let height = 0; |
| 87 | if (headerEl && !unref(getShowFullHeaderRef)) { | |
| 88 | height += headerEl.offsetHeight; | |
| 89 | } | |
| 90 | ||
| 91 | if (tabEl) { | |
| 92 | height += tabEl.offsetHeight; | |
| 93 | } | |
| 94 | ||
| 95 | if (fullHeaderEl && unref(getShowFullHeaderRef)) { | |
| 96 | const fullHeaderHeight = fullHeaderEl.offsetHeight; | |
| 97 | height += fullHeaderHeight; | |
| 98 | fullHeaderHeightRef.value = fullHeaderHeight; | |
| 99 | } | |
| 100 | placeholderHeightRef.value = height; | |
| 101 | }); | |
| 102 | }, | |
| 103 | { | |
| 104 | immediate: true, | |
| 105 | } | |
| 106 | ); | |
| 107 | ||
| 108 | return () => { | |
| 109 | return ( | |
| 110 | <> | |
| 111 | {unref(getIsShowPlaceholderDom) && <div style={unref(getPlaceholderDomStyle)} />} | |
| 112 | <div | |
| 113 | style={unref(getWrapStyle)} | |
| 1bc237 | 114 | class={['multiple-tab-header', unref(getHeaderTheme), { fixed: unref(getIsFixed) }]} |
| 0692b4 | 115 | > |
| V | 116 | {unref(getShowInsetHeaderRef) && <LayoutHeader ref={headerElRef} />} |
| 117 | {unref(showTabsRef) && <MultipleTabs ref={tabElRef} />} | |
| 118 | </div> | |
| 119 | </> | |
| 120 | ); | |
| 121 | }; | |
| 122 | }, | |
| 123 | }); | |
