简介
如果你是前端开发者，你一定会需要在项目中使用各种 npm 包。在前端开发中，messi 是一个非常优秀的提示框和消息框库。它支持多种弹窗效果，包括 modal，toast 等等，非常方便。
安装
使用 npm 安装 messa：
--- ------- ----- ------
安装完成后，你就可以在代码中使用 messa 了。
使用
引入
在你的项目中引入 messa：
------ ----- ---- --------
如果你使用的是旧版浏览器或者 es5，可以使用以下方式引入：
----- ----- - -----------------
基本用法
在 html 中添加一个按钮，当点击按钮时触发 messa：
------- -------------------------------------
在 javascript 中编写 showMessage 函数：
-------- ------------- -
------------
------ -----
-------- ----- -------
----- ---------
---
-在页面中点击按钮，就可以看到 messa 的效果了：
类型
messa 支持多种类型的弹框，包括：success, warning, error, info, loading。
可以通过 type 属性来指定类型：
------------ ------ ----- -------- ----- ------- ----- --------- ---
自定义
messa 支持自定义按钮文字，以及自定义弹框内容。
------------
------ --------
-------- -
------ ----------- --------- --------------------
--
----- -------
-------- -
-
----- -----
-------- -------- -- -
---------------------------------------------------
-
--
-
----- -----
-------- -------- -- -
------------------
-
-
-
---效果如下：
其他选项
可以通过 messa.show 的第三个参数来设置其他选项。
| 选项 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| duration | number | 弹框显示的时间（单位：ms） | 2000 |
| overlay | boolean | 是否显示遮罩 | true |
| overlayColor | string | 遮罩颜色 | 'rgba(0, 0, 0, 0.5)' |
| overlayClick | boolean | 是否允许点击遮罩关闭弹框 | false |
| closeClick | boolean | 是否允许点击弹框关闭弹框 | true |
| classList | string[] | 自定义类名 | [] |
例如，可以设置弹框显示 3 秒钟，不显示遮罩，允许点击遮罩关闭弹框：
------------ ------ ----- -------- ----- ------- ----- --------- -- --- - --------- ----- -------- ------ ------------- ---- ---
总结
messa 是一个非常优秀的提示框和消息框库，支持多种类型的弹框，同时支持自定义内容和按钮。通过本文，你已经学会了 messa 基本用法、类型、自定义和其他选项。希望本文能够对你的前端开发工作有所帮助。最后，附上完整示例代码：
--------- -----
------
------
----- ----------------
---------- - ----- ------------
----- ------------------------------------------------------------ -----------------
-------
------
------- -------------------------------------
------- --------------------------------------------------------------------
--------
-------- ------------- -
------------
------ -----
-------- ----- -------
----- ---------
-- --- -
--------- -----
-------- ------
------------- ----
---
-
---------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f3e1d8e776d08040b48