介绍
ember-fit-to-window-mixin 是一个可以将目标元素自动设置为屏幕大小的 Ember.js Mixin。该 Mixin 的作用是调整目标元素的大小，使其与窗口大小匹配。该包的源代码可以在 https://github.com/paddle8/ember-fit-to-window-mixin 上找到。
安装
使用 NPM 进行安装：
--- ------- ------ -------------------------
使用
在控制器中使用该 Mixin
首先，请在您的控制器中引用该 Mixin：
------ ----- ---- --------
------ ---------------- ---- -------------------------------------------------
------ ------- ----------------------------------------- -
------
---在您的控制器和路由中，您可以使用 fitToWindow 函数来自动设置元素的大小。该函数会监听窗口大小的变化，当窗口大小发生变化时，该函数会自动调整元素的大小，以使其与窗口大小匹配。
------ ----- ---- --------
------ ------- -------------------------
----- -----
------ -
--------------------------
---------------------------- -- -- -
---------------- ------------------------------------------------------------------------------
---
--
---------------- -
-----------------------------------
--
------------------ -
--------------------------------- -------------------- -------------------
--------------------------------- -- -- -
-----------------------------------
---
--
-------------------- -
------------------------------------ -------------------- -------------------
-
---示例
对于一个具体的示例，我们可以为 HTML 中定义如下元素：
---- ----------------------------------------------------------------
在 controller 中，我们可以使用如下代码：
------ ----- ---- --------
------ ------- -------------------------
----- -----
------ -
--------------------------
---------------------------- -- -- -
---------------- ------------------------------------------------------------------------------
---
--
---------------- -
-----------------------------------
--
------------------ -
--------------------------------- -------------------- -------------------
--------------------------------- -- -- -
-----------------------------------
---
--
-------------------- -
------------------------------------ -------------------- -------------------
-
---总结
该 Mixin 的作用是使用 Ember.js 构建自适应的应用程序时，将目标元素自动设置为屏幕大小。使用该 Mixin 将大大简化您的代码，并帮助您快速构建自适应的应用程序。在使用该 Mixin 时，您需要注意的是，确保正确地监听窗口大小的变化，并在窗口大小发生变化时调用 fitToWindow 函数，以保证元素的大小与窗口大小匹配。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e17a563576b7b1ecaa0