46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
|
import { computed, onMounted, ref, watch } from 'vue';
|
|||
|
|
|
|||
|
|
import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/constants';
|
|||
|
|
import { getElementVisibleHeight } from '@vben-core/toolkit';
|
|||
|
|
|
|||
|
|
import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
|
|||
|
|
/**
|
|||
|
|
* @zh_CN 获取内容高度(可视区域，不包含滚动条)
|
|||
|
|
*/
|
|||
|
|
function useContentHeight() {
|
|||
|
|
const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
|
|||
|
|
|
|||
|
|
const contentStyles = computed(() => {
|
|||
|
|
return {
|
|||
|
|
height: `var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT})`,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return { contentHeight, contentStyles };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @zh_CN 创建内容高度监听
|
|||
|
|
*/
|
|||
|
|
function useContentHeightListener() {
|
|||
|
|
const contentElement = ref<HTMLDivElement | null>(null);
|
|||
|
|
|
|||
|
|
const { height, width } = useWindowSize();
|
|||
|
|
const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
|
|||
|
|
const debouncedCalcHeight = useDebounceFn(() => {
|
|||
|
|
contentHeight.value = `${getElementVisibleHeight(contentElement.value)}px`;
|
|||
|
|
}, 200);
|
|||
|
|
|
|||
|
|
watch([height, width], () => {
|
|||
|
|
debouncedCalcHeight();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
debouncedCalcHeight();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return { contentElement };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export { useContentHeight, useContentHeightListener };
|