使用ResizeObserver实现监听dom元素大小

mdn 文档 developer.mozilla.org/zh-CN/docs/…

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

贴代码

hooks部分 传入要监听的元素 和要执行的函数 自动观察 返回实例后可以使用unobserve来停止观察 其实这里还可以加一个节流功能 但是项目中节流肯定不会写一起 需要引入 大家自行改造

/**
 * @auther Loveyless
 * @param element {Element} 监听的元素
 * @param fun {Function} 回调函数
 * @returns observer {ResizeObserver} 返回一个 ResizeObserver 实例 observe unobserve disconnect
 */
export default function resizeObserver(element: Element, fun: Function): ResizeObserver {
  const resizeObserver: ResizeObserver | null = new ResizeObserver((entries: ResizeObserverEntry[]) => {
    // 执行回调函数
    fun.apply(element, entries.contentRect) // entries 参数返回是一个数组，里面包含监听的每个 DOM 元素的相关信息，其中 contentRect 包含的是变化后的 内容区域 的尺寸信息。
  })
  // 开始对元素进行观察 这里抛出实例 方便日后使用实例停止观察
  resizeObserver.observe(element)
  return resizeObserver
}