useElementBounding 是 VueUse 库中提供的自定义 Hook，用于获取目标元素的边界信息（Bounding Box）和相关的状态。
具体来说，useElementBounding 提供了以下功能和特性：
-
边界信息获取：通过传递目标元素的引用或获取目标元素的函数作为参数，可以获取目标元素相对于视口（viewport）的位置和尺寸信息，包括左边距（left）、上边距（top）、宽度（width）和高度（height）等。
-
响应式更新：
useElementBounding返回的边界信息是响应式的，当目标元素的位置或尺寸发生变化时，边界信息会自动更新，以便在组件中实时反映出最新的边界值。 -
额外状态控制：除了边界信息，
useElementBounding还提供了一些额外的状态，例如目标元素是否可见、是否在屏幕内等，可以根据这些状态来控制元素的显示、动画效果或执行其他操作。
通过使用 useElementBounding，可以方便地获取目标元素的边界信息，并在组件中根据这些信息来进行布局、定位或其他与元素位置相关的操作。
用法
<template>
<div ref="el" />
</template>
<script>
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)
return {
el,
/* ... */
}
}
}
</script>
无渲染组件
<UseElementBounding v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseElementBounding>
源码分析
- 参数：
target：目标元素的引用或获取目标元素的函数。可以是普通的元素引用或一个响应式的 ref 对象。options（可选）：配置选项对象，用于自定义功能行为。包括以下属性：reset：在组件卸载时重置边界信息为 0，默认为true。windowResize：监听窗口调整大小事件，默认为true。windowScroll：监听窗口滚动事件，默认为true。immediate：在组件挂载时立即调用更新函数，默认为true。
- 响应式属性：
height、bottom、left、right、top、width、x、y：目标元素的高度、底部位置、左侧位置、右侧位置、顶部位置、宽度、相对于视口的水平位置、相对于视口的垂直位置。这些属性的值会随着目标元素的变化而更新。
- 方法：
update：手动触发更新目标元素的边界信息。可以在需要的时候调用该方法来获取最新的边界信息。
- 功能实现：
- 在组件挂载时，会调用
update方法获取初始的边界信息。 - 使用
useResizeObserver监听目标元素的变化，当目标元素的尺寸发生变化时，会自动更新边界信息。 - 使用
watch监听目标元素的变化，当目标元素发生变化（例如从null变为实际元素或反之）时，会调用update方法更新边界信息。 - 如果配置选项中设置了
windowScroll或windowResize，则会监听相应的窗口滚动和调整大小事件，并在事件触发时调用update方法更新边界信息。
最终，useElementBounding 函数返回一个包含了上述属性和方法的对象，可以在 Vue 组件中使用这些属性和方法来获取和处理目标元素的边界信息。
