什么是 v-resize
v-resize 是一个 Vue.js 插件，用于监视组件尺寸变化并使用钩子函数通知组件。它非常适合需要实时更新 UI 界面的场景，比如适应不同设备尺寸的网页布局、响应用户操作等。
安装与引用
使用 npm 安装 v-resize：
npm install v-resize --save
在 Vue.js 项目中引入 v-resize：
import Verisze from 'v-resize'; Vue.use(Verisze);
基本用法
在需要使用 v-resize 插件的组件中注册 resize 钩子函数。比如在一个自定义组件中，你可以这样使用：
-- -------------------- ---- -------
------ ------- -
----- ---------------------
--------- -
-----------------------------
--
-------- -
---------- -
---------------------- -- ----- -----------
-- ------ -- ----
-
-
--这里使用 $vresize 方法将 onResize 方法注册为 resize 钩子函数。当组件大小发生变化时，onResize 方法将被触发。
你也可以使用 $vresize.once 方法注册一个只会在组件首次加载时执行的 resize 钩子函数。
this.$vresize.once(this.onResize);
或者使用 $vresize.off 方法将 resize 钩子函数从组件中解绑。
this.$vresize.off(this.onResize);
自定义阈值
默认情况下，v-resize 插件会在组件大小发生变化时立即触发 resize 钩子函数。如果你只想在组件大小超过一定阈值时才触发 resize 钩子函数，可以将阈值设置为一个数字。
this.$vresize(100, this.onResize);
这里把阈值设置为 100，表示当组件的宽度或高度变化量超过 100 时才触发 resize 钩子函数。
深入理解
v-resize 插件是通过监听 window 的 resize 事件，判断当前组件尺寸与上一次的差值是否超过阈值来触发 resize 钩子函数的。这意味着，如果你的组件中有多个 resize 钩子函数被注册，它们都会被触发。
如果你想在某个组件中阻止其他组件注册的 resize 钩子函数被触发，可以使用 $vresize.lock 方法锁定当前组件的 resize 事件。
this.$vresize.lock();
锁定后，当前组件尺寸变化时，其他组件中的 resize 钩子函数将不会被触发。当你需要解锁时，可以调用 $vresize.unlock 方法。
this.$vresize.unlock();
示例代码
-- -------------------- ---- -------
----------
---- --------------------- ----------
-- ---- --
------
-----------
--------
------ ------- -
----- ---------------
------ -
------ -
----- --
--
--
--------- -
-----------------------------
--
-------- -
---------- -
----- - ------ ------ - - ---------------------------------------
--------- - - ------ ------ --
-
-
--
---------在这个例子中，我们创建了一个 ResizableBox 组件，用于监测自身尺寸变化并实时更新 UI。在组件加载时，我们使用 $vresize 方法注册了一个 resize 钩子函数 onResize，当组件尺寸变化时，onResize 方法将被调用。在 onResize 方法中，我们获取了组件当前的尺寸，并将其赋值给了 size 变量。
总结
v-resize 插件提供了一种便捷的方法来监视组件尺寸变化，并在尺寸变化时触发钩子函数。它简单易用，但又具有很强的可定制性。通过深入理解 v-resize 的实现原理，我们可以更加灵活地使用它，为我们的项目带来更好的体验和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbcdd