概述
在前端开发过程中，页面布局与样式设计通常是开发者需要面对的问题之一。而对于一些特殊的 UI 进行开发时，我们常常需要用到图层编排来实现特定的效果，这就需要我们去寻找一些有效的解决方案。而 @molejs/unmodeled-layer-2 就是为此而生的。
本文将为大家详细介绍 @molejs/unmodeled-layer-2 这个 npm 包的使用教程，并提供实用的示例代码。
安装和导入
在开始使用 @molejs/unmodeled-layer-2 之前，我们需要先进行安装。
使用 npm 进行安装：
npm install @molejs/unmodeled-layer-2
将其导入到项目中：
import UnmodeledLayer from '@molejs/unmodeled-layer-2';
使用
示例 1：通用模态框
-- -------------------- ---- -------
------ -------------- ---- ----------------------------
----- ----- - --- ----------------
-------- ---------
------- ----------
----------------- ---------------
--------------- ----
------------ -----
------------ -
------------------- -------
--
----------- -
------------------ -------
--
------------- -
------------------- --------
--
------------ -
------------------ --------
-
---
-------------示例 2：常用弹窗
-- -------------------- ---- -------
------ -------------- ---- ----------------------------
----- ----- - --- ----------------
-------- ---------
-------- -----------------
----------------- ---------------
--------------- ----
----------- -----
-------------------- -----
------------ -
------------------- -------
--
----------- -
------------------ -------
--
------------- -
------------------- --------
--
------------ -
------------------ --------
-
---
-------------参数解释
wrapper：包裹层的 ID 或 Class，必选参数。button：按钮的 Class，当 trigger 无法满足需求时使用。trigger：触发弹框的 Class，可选参数。closeBtnSelector：关闭按钮的 Class 或 ID，必选参数。scrollLock：是否将页面滚动锁定，可选参数，默认值为 true。transitionTime：动画时间，可选参数，默认值为 300。modalMoveOn：开启移动模态框，移动不会超出视窗范围，可选参数，默认值为 false。closeOnOverlayClick：点击阴影关闭模态框，可选参数，默认值为 true。beforeOpen：打开前的回调函数，可选参数。afterOpen：打开后的回调函数，可选参数。beforeClose：关闭前的回调函数，可选参数。afterClose：关闭后的回调函数，可选参数。
总结
通过这篇文章，我们详细地介绍了 @molejs/unmodeled-layer-2 这个 npm 包的使用教程，并提供了实用的示例代码。希望能让大家在开发过程中更加方便地进行页面布局和样式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161007