by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimization of tabbar display (#4169)

Browse Source 
* perf: optimization of tabbar display

* fix: ci error

* chore: typo

* chore: typo
This commit is contained in:
Vben
2024-08-16 22:20:18 +08:00
committed by GitHub
parent 8987067b5a
commit 0faf7810b6
38 changed files with 710 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/@core/composables/src/use-content-style.ts
View File

@@ -1,5 +1,5 @@
import type { CSSProperties } from 'vue';
import { computed, nextTick, onMounted, ref } from 'vue';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import {
CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
@@ -14,6 +14,7 @@ import { useCssVar, useDebounceFn } from '@vueuse/core';
* @zh_CN content style
*/
function useContentStyle() {
let resizeObserver: null | ResizeObserver = null;
const contentElement = ref<HTMLDivElement | null>(null);
const visibleDomRect = ref<null | VisibleDomRect>(null);
const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
@@ -41,12 +42,15 @@ function useContentStyle() {
);
onMounted(() => {
nextTick(() => {
if (contentElement.value) {
const observer = new ResizeObserver(debouncedCalcHeight);
observer.observe(contentElement.value);
}
});
if (contentElement.value && !resizeObserver) {
resizeObserver = new ResizeObserver(debouncedCalcHeight);
resizeObserver.observe(contentElement.value);
}
});
onUnmounted(() => {
resizeObserver?.disconnect();
resizeObserver = null;
});
return { contentElement, overlayStyle, visibleDomRect };