在前端开发中，我们经常需要使用弹出框或对话框等弹出性质的组件。@polymer/iron-overlay-behavior 是 Polymer 元素的一个行为，它实现了一个可抽象的、通过扩展它可以生成任意样式的覆盖浮窗。本篇文章将着重介绍 @polymer/iron-overlay-behavior 的用法和注意事项。
安装
@polymer/iron-overlay-behavior 是一个 NPM 包，可以通过以下命令进行安装：
npm install --save @polymer/iron-overlay-behavior
示例
下面是一个简单的示例代码，它演示了如何使用 @polymer/iron-overlay-behavior 创建一个弹出框。
-- -------------------- ---- -------
----
-- ------------------------------ - ----------
---
----------- ---------------
----------
-------
-- -- --
--------
---- ------------ ----------------
---- ----- ---
------
-----------
--------
----- -------- ------- ----------------------------------------------------- ---------------- -
------ --- ---- - ------ ------------ -
-- -----
------ --- ------------ -
------ -
-- ----
-
-
-- ------
---------------------- -
-- ---------
-
-- ----
------------------ -
-- -------
-
-
---------------------------------- ----------
---------
-------------用法
引入
在使用 @polymer/iron-overlay-behavior 之前，需要在 HTML 文件或 Polymer 元素中引入它。如果直接使用脚手架工具创建的 Polymer 应用，一般情况下已经默认引入了 @polymer/iron-overlay-behavior：
<link rel="import" href="../../bower_components/polymer/polymer-element.html"> <link rel="import" href="../../bower_components/iron-behaviors/iron-overlay-behavior.html">
创建 Polymer 元素
然后，我们需要创建一个 Polymer 元素，并使用 @polymer/iron-overlay-behavior 进行扩展，它是一个 mixin，可以和其它行为和元素进行混合。
class MyDialog extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) {
// ...
}初始化配置
在创建元素时，我们需要设置以下基本属性：
- opened：默认为 false，表示弹出框是否可见。
- withBackdrop：默认为 true，表示是否显示幕布。
- no-cancel-on-outside-click：默认为 false，表示是否在外部的点击事件中取消弹出框。
- no-cancel-on-esc-key：默认为 false，表示是否在按下 ESC 键时取消弹出框。
-- -------------------- ---- -------
------ --- ------------ -
------ -
------- -
----- --------
------ -----
--
------------- -
----- --------
------ ----
--
----------------------- -
----- --------
------ -----
--
----------------- -
----- --------
------ -----
-
-
-事件处理函数
我们还需要写一些处理打开和关闭事件的函数。例如，当弹出框被打开时，我们可能需要更新弹出框中的内容或者调整它的大小。
_onIronOverlayOpened() {
// ...
}内置样式
@polymer/iron-overlay-behavior 包含了一些 CSS 样式，帮助我们快速构建 UI。在自定义元素中，我们可以使用这些样式，并且可以覆盖它们，以适应我们的特定需要。
示例
下面是一个完整的示例代码，它演示了如何在页头中调用弹出框。
-- -------------------- ---- -------
----
-- ------------------------------ - ----------
---
----------- ---------------
----------
-------
-- -- --
------ -------- -
-------- ------
--------- ---------
---- --
----- --
------ --
------- --
----------------- ------
------- --- ----- -----
-
------- -
----------------- ----------
-------------- --- ----- -----
-------- -----
-
-------- -
-------- -----
-
-------- -
----------- -------
------------ -----
--------------- -----
-
------ -
--------- ---------
---- ----
------ -----
------- --------
-
--------
---- ------------ ----------------
---- ---------------
---------------
-- --------------------- ------ ---------------------------
------
---- ----------------
---- -- ---
------
---- ----------------
------- -------------------------------
------- ------------------------------
------
------
-----------
--------
----- -------- ------- ----------------------------------------------------- ---------------- -
------ --- ---- - ------ ------------ -
-- -----
------ --- ------------ -
------ -
------- -
----- --------
------ -----
--
------------- -
----- --------
------ ----
--
----------------------- -
----- --------
------ -----
--
----------------- -
----- --------
------ -----
-
-
-
-- ------
---------------------- -
-- -------
------------------------
-
-- -------
------------------ -
--------------------------- - ------------------ - -----
-
-- -----
-------- -
----------- - ------
-
-- --
---------- -
-- ------
--------------
-
-- --
--------- -
--------------
-
-
---------------------------------- ----------
---------
-------------
----
------ ---------
---
-----------------------
------- -------------------------------------
--------
----- -------- ------- --------------- -
------ --- ---- - ------ ------------ -
-- -----
------------- -
------------------------------------------------- - -----
-
-
---------------------------------- ----------
---------结论
@polymer/iron-overlay-behavior 可以用于快速构建弹出框和对话框等弹出性质的组件。本篇文章中向您展示了如何使用这个 NPM 包，并提供了一个基础示例代码。通过学习本文，您可以更好地掌握 @polymer/iron-overlay-behavior 的使用，并扩展它以满足您的项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7557c8a9b7065299ccbcae