22 lines
626 B
TypeScript
22 lines
626 B
TypeScript
|
import { useElementSize } from '@vueuse/core'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 监听容器高度变化的hook
|
||
|
|
* @param {Ref<HTMLElement | null>} containerRef - 容器的ref引用
|
||
|
|
* @param {boolean} [immediate=true] - 是否立即执行一次
|
||
|
|
* @returns {Ref<number>} 容器的高度
|
||
|
|
*/
|
||
|
|
export function useContainerHeight(containerRef, immediate = true) {
|
||
|
|
// 存储容器高度的响应式变量
|
||
|
|
|
||
|
|
const { height } = useElementSize(containerRef)
|
||
|
|
const containerHeight = computed(() => {
|
||
|
|
let offset = height.value + 84
|
||
|
|
return { height: `calc(100% - ${offset}px)` }
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
return containerHeight;
|
||
|
|
}
|