提交 | 用户 | 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 |
}); |