在前端页面开发中，经常会遇到需要监听元素大小变化的需求。由于浏览器提供的 resize 事件只能监听窗口的变化，而无法监听元素的变化，因此我们需要借助一些工具来帮助我们实现这个功能。本文将介绍一款 npm 包 watch-element-resize，它可以简单易用地实现监听元素大小变化。
watch-element-resize 简介
watch-element-resize 是一款基于 ResizeObserver 和 MutationObserver 的 npm 包，用于封装监听元素大小变化功能。它支持监听元素的大小变化、位置变化、样式变化等。
安装
通过 npm 安装：
npm install watch-element-resize --save
使用方法
简单使用
watch-element-resize 提供了一个 watch 方法，可以非常方便地监听元素的大小变化。我们只需要把需要监听的元素和回调函数传入即可。
import watchElementResize from 'watch-element-resize';
watchElementResize(document.querySelector('#target'), (element) => {
console.log('target 元素大小发生了变化', element.offsetWidth, element.offsetHeight);
});上面的代码中，我们监听了一个 id 为 target 的元素，并在元素大小发生变化时打印新的宽度和高度。
复杂使用
watchElementResize 方法支持传入第三个参数，用于指定 watch 方法的配置项。
watchElementResize(document.querySelector('#target'), (element) => {
console.log('target 元素大小发生了变化', element.offsetWidth, element.offsetHeight);
}, {
debounceDelay: 100,
scroll: true,
debug: true,
});上面的代码中，我们传入了三个配置项：
debounceDelay：函数防抖动的时间间隔，默认值为 30ms。scroll：是否监听滚动条的变化，默认为 false。debug：是否打印调试信息，默认为 false。
我们可以根据实际情况调整这些配置项，以实现更加精细化的监听。
示例代码
为了更加直观地理解 watch-element-resize 的使用方法，我们来尝试实现一个简单的示例。下面是一个窗口内部可以拖拽的方块：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------- --------------
-------
------- -
------ -----
------- -----
----------------- --------
--------- ---------
---- -----
----- -----
------- -----
-
--------
-------
------
---- ---------------------
------- --------------------------
-------
-------上面的代码中，我们定义了一个宽高为 50px 的方块，并设置其 position 为 absolute，这样我们可以通过改变 top 和 left 属性实现拖拽。接下来，我们来实现拖拽的逻辑：
-- -------------------- ---- -------
------ ------------------ ---- -----------------------
----- ------ - ----------------------------------
--- ---------- - ------
--- --------- - -----
-------- ---------------------- -
---------- - -----
--------- - -
-- ------------- - ------------------
-- ------------- - -----------------
--
-
-------- ---------------------- -
-- ------------ -
----- - - ------------- - ------------
----- - - ------------- - ------------
----------------- - ---------
---------------- - ---------
-
-
-------- --------------- -
---------- - ------
--------- - -----
-
------------------------------------ -----------------
-------------------------------------- -----------------
------------------------------------ ---------------
-------------------------- --------- -- -
------------------- ----------- -------------------- ----------------------
-- -
------- -----
---通过 mousedown、mousemove 和 mouseup 事件，我们实现了方块的拖拽效果。同时，我们使用了 watch-element-resize 监听方块的变化，并在控制台输出了它的宽度和高度。如果你运行这个示例，可以发现改变浏览器的窗口大小、拖拽方块等多种情况下，都可以监听到方块的大小变化，并输出变化后的宽度和高度。
总结
本文介绍了一款 npm 包 watch-element-resize，它可以帮助我们完成元素大小变化的监听。我们从安装、简单使用、复杂使用以及示例代码等方面提示了使用方法。希望本文对你有所帮助，如果有问题或想法，欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665281e8991b448e2773