useElementSize 是 VueUse提供的一个自定义 hook，用于获取目标元素的大小信息并提供响应式的宽度和高度属性。
具体来说，useElementSize 的作用是:
-
监测目标元素的大小变化：通过使用
useResizeObserver钩子函数来监测目标元素的尺寸变化。当目标元素的大小发生变化时，会触发回调函数，从而更新宽度和高度属性。 -
提供响应式的宽度和高度属性：
useElementSize返回一个包含响应式的width和height属性的对象。这意味着在目标元素的大小发生变化时，这两个属性会自动更新，并且可以在 Vue 组件中以响应式的方式使用它们。 -
支持初始大小设置：可以通过
initialSize参数来设置初始的宽度和高度值。这对于初始时目标元素不可见或尚未加载的情况很有用，可以提供一个默认的初始大小。
useElementSize 可以方便地在 Vue 组件中获取目标元素的大小信息，并以响应式的方式跟踪和使用它们。这对于需要根据元素大小进行布局或其他操作的情况非常有用。
用法
<template>
<div ref="el">
Height: {{ height }}
Width: {{ width }}
</div>
</template>
<script>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { width, height } = useElementSize(el)
return {
el,
width,
height,
}
}
}
</script>
组件式用法
<UseElementSize v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseElementSize>
指令式用法
<script setup lang="ts">
import { vElementSize } from '@vueuse/components'
function onResize({ width, height }: { width: number; height: number }) {
console.log(width, height)
}
</script>
<template>
<textarea v-element-size="onResize" />
<!-- with options -->
<textarea v-element-size="[onResize, {width:100,height:100}, {'box':'content-box'} ]" />
</template>
源码学习
具体作用如下：
-
获取目标元素的大小：通过传入目标元素的引用或获取目标元素的函数作为参数，钩子函数会使用
useResizeObserver钩子函数来监测目标元素的尺寸变化。当目标元素的大小发生变化时，会触发回调函数，并更新宽度和高度属性。 -
响应式属性：
useElementSize返回一个包含响应式属性的对象，其中width和height属性会根据目标元素的大小变化自动更新。 -
设置初始大小：可以通过
initialSize参数设置初始的宽度和高度值。如果目标元素在初始化时不可见或尚未加载，可以使用此选项设置一个默认的初始大小。 -
SVG 元素处理：针对 SVG 元素，根据配置的
box参数来确定计算宽度和高度的方式。如果是 SVG 元素且box为'content-box'，则使用window.getComputedStyle获取计算后的宽度和高度。否则，根据box参数获取对应的尺寸数组，并计算宽度和高度。 -
监听目标元素变化：通过
watch函数监听目标元素的变化，当目标元素发生变化时，会将宽度和高度属性重置为初始值或设置为 0。
