简介
@npm-polymer/iron-overlay-behavior 是一个 Polymer 元素基础行为包，它提供了弹出框、模态框以及工具提示等常见的浮层组件的基础行为实现，使开发者可以方便地构建和自定义这些组件。
此文章将从安装和基础使用入手，深入介绍如何使用 @npm-polymer/iron-overlay-behavior 开发常见的浮层组件，并提供实例代码以便读者更好地学习和掌握。
安装和基础使用
安装
您可以通过 npm 安装 @npm-polymer/iron-overlay-behavior 包:
npm install @npm-polymer/iron-overlay-behavior
安装完成后，可以将组件引入到您的 Polymer 元素中进行使用。在 Polymer 3 中，您可以使用以下代码进行元素导入：
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { IronOverlayBehavior } from '@npm-polymer/iron-overlay-behavior/iron-overlay-behavior.js';
export class MyElement extends IronOverlayBehavior(PolymerElement) {
static get template() { return html`<div>...</div>`; }
...
}基础使用
@npm-polymer/iron-overlay-behavior 主要提供了以下五种组件的行为：iron-overlay, iron-dropdown, iron-dialog, iron-toast 和 iron-tooltip，它们都可以很方便地使用这个行为实现。
这里以 iron-dialog 为例，假设你已经安装了 @npm-polymer/iron-overlay-behavior 包。下面的代码演示了如何使用 iron-dialog 组件：
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
------ - ------------------- - ---- --------------------------------------------------------------
----- --------- ------- ----------------------------------- -
------ --- ---------- -
------ -----
------- ----------------------------- ---------------
------------ ----------- --------------------
---------- ----------
----------- -------------
---- ---------------
------- -----------------------------------
------
--------------
--
-
--------------- -
----------- - -------------
-
-------------- -
----------- - ------
-
-
----------------------------------- -----------上述代码中，我们在 MyElement 中使用了 IronOverlayBehavior，然后在 template 中使用 iron-dialog 元素，通过 opened 属性来控制弹出框的显示与隐藏，通过 slot="buttons" 实现了底部按钮的布局，并通过 _toggleDialog 和 _closeDialog 两个方法来处理打开和关闭弹出框的逻辑。
组件 API
使用 @npm-polymer/iron-overlay-behavior 还可以通过它所提供的一些 API 来实现对组件进行自定义。
下面是一部分 IronOverlayBehavior 支持的 API：
1. attach
attach 用于将浮层组件插入到指定元素中。例如：
const someElement = document.querySelector('#someElement');
this.attach(someElement);将会将组件插入到 someElement 中。
2. notifyResize
notifyResize 用于通知组件以响应布局变化，例如浏览器窗口大小变化事件等。当浮层组件的位置或大小发生变化时，应该调用该方法重新计算布局：
this.notifyResize();
3. render
render 用于重新渲染组件，该方法主要用于在不更改组件状态的情况下重绘组件，例如更新了组件的样式或使用 JavaScript 更新元素内容：
this.render();
自定义浮层组件
除了基础组件外，我们可以通过 @npm-polymer/iron-overlay-behavior 提供的行为对浮层组件进行定制。
以下是一个完整的自定义弹出框组件的示例：
-- -------------------- ---- -------
------ - ----- -------------- - ---- --------------------------------------
------ - ------------------- - ---- --------------------------------------------------------------
----- -------- ------- ----------------------------------- -
------ --- ---------- -
------ -----
-------
----- -
-------- -----
--------- ------
---- --
----- --
------ --
------- --
----------------- ----------------
-------- ------
-
------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
----------------- -----
-------- -----
-------------- ----
----------- - --- --- ----------------
-
--------
---- ------------ ----------------
---- ---------------
------------------
---- ----------------
-------------
------
---- ----------------
------- ----------------------------------------
------- ------------------------------------------
------
------
------
--
-
------ --- ------------ -
------ -
------ -
----- -------
------ ------- ------
--
------------- -
----- --------
------ ----
--
--------- -
----- --------
------ ------
------- ----
--
---------- -
----- --------
------ ------
------- ----
-
--
-
------ --- ----------- -
------ -
------------------------------ --------------
--
-
------- -
--------------
---------------------------------------------- - -- -
------------- - -----
----------- - ------
---
-
--------------- -
------------- - -----
----------- - ------
-
---------------- -
-------------- - -----
----------- - ------
-
-
---------------------------------- ----------在上述示例中，MyDialog 实现了一个简单的弹出框组件。它继承了 IronOverlayBehavior 行为，使用了 overlay 样式布局，在 template 代码中定义了组件的结构和样式。通过 properties 定义了组件的属性，包括弹出框的标题、是否带有背景模态层、是否取消和确认等。通过 _overlayStatusChanged 方法来处理状态改变后的逻辑，通过 ready 方法来监听在组件上调用 iron-overlay-behavior 所触发的 iron-overlay-canceled 事件，最后通过 _handleCancel 和 _handleConfirm 方法分别处理取消和确认操作。
浮层组件属性
浮层组件同时也支持了 Polymer 基本属性的继承：
opened: 是否打开浮层。disabled: 是否禁用浮层的打开功能。no-overlap: 是否在浮层和触发器的交叉区域停止布局时覆盖，而不是移动浮层到更合适的地方。no-auto-focus: 是否在打开浮层时自动设置焦点。no-cancel-on-outside-click: 是否关闭浮层的打开状态，并且应该在外部单击事件时处理关闭。no-cancel-on-esc-key: 是否关闭浮层的打开状态，并应该在按下 Esc 键时处理关闭。
总结
本篇文章介绍了 @npm-polymer/iron-overlay-behavior 的用法和常见 API，也提供了一个自定义浮层组件的示例作为参考。希望这篇文章对您学习和使用前端浮层组件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb3d