前言
@polymer/iron-fit-behavior 是一个由 Polymer 团队提供的一个非常实用的行为特性。该特性可用于限制弹出层，工具提示和对话框的位置及对齐方式。它非常易用并且没有依赖。
本篇文章将会详细介绍该 npm 包的使用方法，并提供示例代码帮助读者更好地理解。
依赖
使用 @polymer/iron-fit-behavior 时，唯一的依赖为 @polymer/polymer，因此需要先安装 polymer。
npm install @polymer/polymer
顺便提一下，iron-fit-behavior 支持 Polymer 3.x版本。
安装
使用 npm 安装 @polymer/iron-fit-behavior。
npm install @polymer/iron-fit-behavior
安装完成后，您需要将模块导入您的项目中，例如：
<script type="module"> import '@polymer/iron-fit-behavior/iron-fit-behavior.js'; </script>
使用
要在您的元素中使用 @polymer/iron-fit-behavior，请先定义一个样式混合器（Mixin）来包含 iron-fit-behavior，例如：
:host {
@apply --iron-fit-behavior;
}该 mixin 将添加必要的 CSS 规则和属性，以实现此行为的核心的重要功能。
现在，让我们来看一个示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------ ------------
------- ------------- -------------------------------------------------
------- --------------
------ --------------------------------------------------
------ ----------------------------------------
------ ----------------------------------------
------ ----------------------------------------
----- -------- ------- --------------- -
------ --- ---------- -
------ -
-------
----- -
-------- ------
--------- ---------
------ ------
------- ------
----------------- -----
-
------------ -
------- --
----------- -------
-------- ---- --
-
------------ -
--------- ---------
---- --
------ --
-
--------
------------- ----------- ---------------------------
--- ----------------------------
------------- ---------------- --------------------------------
------------- ----------- ------- --------- -------- -------------------------
---------------
--
-
------ --- ---- - ------ ------------ -
------ --- ------------ -
------ -
--------------- -
----- -------
------ ---------- -
------ ------------------------------------------
-
-
--
-
------ --- ----------- -
------ -
-------------------------------------
--
-
------------------------------- -
--------------- - -------- - -----
-
-
---------------------------------- ----------
---------
-------
------
---- ------------------- ---------------- --------- ---- ----- ----- --------------
-----------------------
-------
-------代码解析：
positionTarget属性表示将提示框对齐到的 HTML 元素，该元素应该具有定义了 CSSposition属性的父级（非position:static）。iron-fit-behavior的核心功能就是管理提示框的位置，因此在本示例中，我们可以通过更新my-dialog元素的left样式来实现位置上下文的更改。paper-slider用于更新方框位置。该示例还介绍了如何使用 Polymer 元素，如果您不是太熟悉，请查看戳这里 在 Polymer 3.x 版本中，如何创建一个元素
现在，您可以在浏览器中查看上述示例，并通过在位置下方的滑块上拖动对话框的位置进行实时调整，如下所示：
结语
现在，您已经学会了如何使用 @polymer/iron-fit-behavior。它是一个极其实用且易使用的工具。希望这篇文章能为大家带来帮助，并请学习者如有问题请在评论区留言，我很乐意为您解答。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7557c8a9b7065299ccbcaf