k_online_ui/src/hooks/calculatingHeight.ts

/**
 *
 * @param parentElement 基准容器Ref
 * @param fixedHeight 固定减去的值
 * @param elementList 需要减去的可变的容器RefList
 * @returns 高度值number
 */
export const useCalculatingHeight = (
  parentElement: HTMLElement | null,
  fixedHeight: number,
  elementList: Ref<HTMLElement | null>[]
) => {
  const containerHeight = ref(0)
  const calculatingHeight = () => {
    if (parentElement) {
      containerHeight.value = parentElement.offsetHeight - fixedHeight
      elementList.forEach((item: any) => {
        if (item.value) {
          containerHeight.value -= item.value.offsetHeight || 0
        }
      })
    }
  }
  // 创建 ResizeObserver 观察变化
  const resizeObserver = new ResizeObserver(() => {
    calculatingHeight()
  })

  // 开始观察
  const startObserving = () => {
    if (parentElement) {
      resizeObserver.observe(parentElement)
    }
    elementList.forEach((item) => {
      if (item.value) {
        resizeObserver.observe(item.value)
      }
    })
  }

  // Vue 生命周期钩子
  onMounted(() => {
    nextTick(() => {
      calculatingHeight()
      startObserving()
    })
  })

  // 停止观察
  const stopObserving = () => {
    resizeObserver.disconnect()
  }

  // Vue 生命周期钩子
  onMounted(() => {
    nextTick(() => {
      calculatingHeight()
      startObserving()
    })
  })

  onBeforeUnmount(() => {
    stopObserving()
  })

  return containerHeight
}