在前端开发中，弹窗是一种常见的交互方式，而使用一个现成的 npm 包可以极大地减少我们的开发时间。本文将介绍一个名为 web-window-pure 的 npm 包，它可以帮助我们快速创建自定义的弹窗，免去自己编写、维护弹窗的麻烦。
安装
使用 npm 安装 web-window-pure：
npm install web-window-pure --save
基本使用
- 在 HTML 中添加一个容器：
<div id="my-window"></div>
- 在 JavaScript 中导入
web-window-pure并创建窗口实例：
-- -------------------- ---- -------
------ ------------- ---- ------------------
----- -------- - --- ---------------
--- ------------
------ --- ------ -------
-------- -------- -- --- ------- -- -- -------------
-------- -
-
----- -----
-------- -- -- -
--------- ------ ----------
--
--
-
----- ---------
-------- -- -- -
------------- ------ ----------
--
--
--
---- 显示窗口：
myWindow.show();
以上代码将创建一个带有标题、内容和两个按钮的窗口，并显示出来。在用户点击按钮时，分别会触发 handler 函数内的代码。
高级使用
除了基本使用，web-window-pure 还提供了许多配置项来实现自定义的窗口。
宽度和高度
可以通过 width 和 height 配置项来设置窗口的宽度和高度：
-- -------------------- ---- -------
----- -------- - --- ---------------
--- ------------
------ --- ------ -------
-------- -------- -- --- ------- -- -- -------------
-------- -
---
--
------ ------
------- ------
---边框
可以通过 border 配置项来控制窗口的边框样式：
-- -------------------- ---- -------
----- -------- - --- ---------------
--- ------------
------ --- ------ -------
-------- -------- -- --- ------- -- -- -------------
-------- -
---
--
------- -
---------- ------
------ -------
------- -------
--
---thickness 控制边框的厚度，color 控制边框的颜色，radius 控制边框的圆角半径。
模态窗口
可以通过 overlay 配置项来创建模态窗口，这将阻止用户在窗口未关闭之前操作底层页面：
-- -------------------- ---- -------
----- -------- - --- ---------------
--- ------------
------ --- ------ -------
-------- -------- -- --- ------- -- -- -------------
-------- -
---
--
-------- -----
---监听事件
可以监听窗口的显示和关闭事件，并在事件发生时执行自己的代码：
-- -------------------- ---- ------- ----- -------- - --- --------------- --- --- ------------------- -- -- - ------------------- -------- --- -------------------- -- -- - ------------------- --------- ---
示例代码
下面是一个完整的示例代码，演示了如何创建一个具有自定义样式、模态窗口、关闭按钮和表单输入的窗口：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
---------- -
----------------- -----
-------------- ----
----------- --- --- --- ------- -- -- -----
-
---------------- -
----------------- --------
-------------- --- --- - --
------ -----
------------ -----
-------- -----
----------- -------
-
------------------ -
-------------- - - --- ----
-------- -----
----------- -------
-
------------------ -
----------- -----
----------- -------
-
------------------ ------ -
----------------- --------
-------------- ----
------- -----
------ -----
------- --------
---------- -----
------------- -----
-------- --- -----
-
------------------ ----------------- -
------------- --
-
------------------ ------------ -
----------------- --------
-
------------------ ------------ -
-------- -----
-
---------------- -
------- --------
--------- ---------
------ ----
---- ----
-
---------------------- -
------ --------
-
--------------- ----- -
-------- ------
-------------- -----
----------- -----
-
--------------- ------------------ -
------ -----
-------- ----
---------- -----
------- -----
-------------- ----
----------- ----- - - --- ------- -- -- -----
-------- -----
-
--------------- -------------------- -
----------- -----
-
--------
-------
------
------- ------------------ ---------------
---- ---------------------
------- -----------------------------------------------------------------------------------
--------
----- ------- - ------------------------------------
----- -------- - --- ---------------
--- ------------
------ --- ------ -------
-------- -
---- ------------------
---- ------------------------
-- ------ -----
----- ----------------------- -----------------------------------
------
---- --------------------------
----- -----------------------
-------
-----
------ ----------- ------------
--------
------ ------------- ---------------
-------
------
---- --------------------------
------- -----------------------------------------
------
------
--
------ ------
------- -------
------- -
---------- ------
------ -------
------- ------
--
-------- -----
------------ ------
---
--------------------------------- -- -- -
----------------
---
-------------------- -- -- -
------------- ---------
---
---------
-------
-------结语
web-window-pure 是一个非常实用的 npm 包，它可以帮助我们轻松快速地创建自定义的弹窗，提高我们的开发效率。希望本文对大家有所帮助，欢迎大家交流、分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552c581e8991b448d02a1