简介
alertmodal 是一款基于 JavaScript 和 CSS 的前端组件库，可用于创建弹窗提示框和模态框。该组件库已经发布到 npm 上，方便项目中引入并使用。
安装
使用 npm 安装：
--- ------- ----------
或者使用 yarn 安装：
---- --- ----------
使用
引入
在前端项目中可以使用以下方式引入：
------ - ---------- - ---- -------------
或者直接引入路径：
----- ---------------- ---------------------------------------------------- -- ------- ------------------------------------------------------------
建议使用第一种方式，以便 JavaScript 模块化管理。
弹窗提示框
AlertModal 可以用于创建简单的弹窗提示框，如下所示：
----- ---------- - --- ---------- --
------ -----
-------- --------
------------ -----
---------- ---------- -
-----------------------
------------------
-
---
------------------创建一个 AlertModal 实例，传入 title、message、confirmText、onConfirm 四个参数，其中 title 和 message 分别表示提示框的标题和内容，confirmText 表示确认按钮的文本，onConfirm 表示确认按钮的点击事件回调函数。调用 show 方法即可显示弹窗提示框，调用 hide 方法即可隐藏弹窗提示框。
模态框
AlertModal 可以用于创建模态框，如下所示：
----- ---------- - --- ---------- --
------ ------
-------- -
--------------
--------------
--
------------ -----
----------- -----
---------- ---------- -
-----------------------
------------------
--
--------- ---------- -
----------------------
------------------
-
---
------------------创建一个 AlertModal 实例，传入 title、content、confirmText、cancelText、onConfirm、onCancel 六个参数，其中 title 表示模态框的标题，content 表示模态框的内容，confirmText、cancelText 分别表示确认和取消按钮的文本，onConfirm、onCancel 分别表示确认和取消按钮的点击事件回调函数。调用 show 方法即可显示模态框，调用 hide 方法即可隐藏模态框。
示例代码
------ - ---------- - ---- -------------
----- ---------- - --- ---------- --
------ -----
-------- --------
------------ -----
---------- ---------- -
-----------------------
------------------
-
---
------------------------ - ---------- - ---- -------------
----- ---------- - --- ---------- --
------ ------
-------- -
--------------
--------------
--
------------ -----
----------- -----
---------- ---------- -
-----------------------
------------------
--
--------- ---------- -
----------------------
------------------
-
---
------------------结语
AlertModal 是一款方便实用的前端组件库，可以帮助我们快速创建弹窗提示框和模态框，减少重复开发的工作量。希望本文对大家有所帮助，感谢阅读。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005602281e8991b448de4ec