前言：在 Web 开发中，动态地改变组件的大小和位置是非常常见的操作。本文将介绍如何使用 npm 包 ember-resize-mixin 来实现这一需求。
什么是 ember-resize-mixin
ember-resize-mixin 是一个轻量级的 mixin，在你的 Ember 组件中引入之后，即可监听组件容器的大小变化，并且根据变化触发对应的回调函数。
安装
安装 ember-resize-mixin 可以通过以下命令：
npm install ember-resize-mixin --save
如何使用
使用起来非常简单，只需要在组件的 js 文件中，引入 mixin，并设置回调函数，即可进行监听。
-- -------------------- ---- -------
------ ----------- ---- ---------------------
------ - -------- - ---- ----------------
-- ----
------ ------- ----------------------------- -
-- ----
----------------- ------------------- -
------ ---------------------------
---
-- ---------- --------------
----------- -------------- -
-- -- ---------
-
---该 mixin 提供三个 API：
containerElement：用来指定你要监听的容器元素。默认为当前组件的parentElement。onResize：用来指定当容器大小发生变化时，需要触发的方法。dimensionsChanged：用来指定在 throttle 延迟毫秒后需要触发的方法。这个 API 将传递被监听元素的宽度和高度。
示例
下面是一个简单的例子：
-- -------------------- ---- -------
-- ----
------ ------- ----------------------------- -
----------- -------------------
-- ----
----------------- ------------------- -
------ ---------------------------
---
-- ---------- --------------
----------- --------------- ------- -
-------------------------------------------------------
-
---在这个例子中，我们创建了一个名为 demo-component 的组件，在其中使用了 ResizeMixin。监听的容器默认为组件的 parentElement，当容器大小发生变化时，changeSize 方法将被调用。在本例子中，changeSize 方法只是简单地将新的宽度和高度输出到控制台。
总结
使用 npm 包 ember-resize-mixin 可以非常方便地实现动态改变组件大小和位置的功能。使用起来十分简单，只需要引入 mixin 并设置回调函数就可以了。本文对其进行了详细和深入的讲述，期望本文可以对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbf0