perf(tabs): perf multiple-tabs

vben

2020-12-13 27e50b47479af8eaeb4be020aeb0fcbdb4308295

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