在前端开发中，我们经常需要在网站的交互过程中输出一些更人性化、友好的提示信息（如错误信息提示、成功信息提示、系统提示等）。 在这种情况下，通用消息 npm 包即使得我们可以更加方便、快捷地为项目添加这些提示信息功能。
common-message 是什么？
Common-message 是一款基于 jQuery 实现的能够在网页交互过程中创建、展示提示信息的 npm 包。该包具有以下特点：
- 可以自由设置时间、样式和展示位置等等；
- 支持动画效果，使得提示信息展示更加美观、俏皮；
- 可以支持开发者自行上传图片，增加提示信息的图像化程度。
如何使用 common-message？
安装 common-message
在项目运行目录下使用以下命令进行安装：
npm install common-message
安装完成后，即可在项目中使用 common-message 了。
引入 common-message
在需要使用 common-message 的文件中引入 common-message 样式文件和 js 文件：
import 'common-message/dist/index.css'; import commonMessage from 'common-message';
调用 common-message
在需要使用提示消息的地方，调用 common-message：
commonMessage({
type: 'error',
content: '发生错误！',
timeout: 2000,
top: '30%',
left: '40%',
});common-message 参数说明
在调用 common-message 时，可以传递多个参数，不传递参数，仅使用默认设置。
以下是常用参数的说明：
| 参数名 | 类型 | 描述 |
|---|---|---|
| type | String | 提示类型，目前支持 "success"（成功），"warning"（警告），"error"（错误），"info"（提示）四种 |
| content | String | 提示消息内容 |
| timeout | Number | 提示消息停留时间，单位为毫秒 |
| top | String | 提示消息所处的顶部距离，可传入数值表示像素（如 '50px'）或百分比（如 '30%'） |
| left | String | 提示消息所处的左侧距离，可传入数值表示像素或百分比（如 '40%'） |
| animation | String | 提示消息初始和结束时的动画效果（如 'fade'、'slide'、'flip' 等） |
| image | String | 提示消息图片文件路径 |
| imageWidth | String | 提示消息图片宽度 |
| imageHeight | String | 提示消息图片高度 |
给出一个完整的使用示例
该示例展示了在项目中使用 common-message 的完整流程，包括安装、引入和调用：
-- -------------------- ---- -------
--------- -----
------
------
--------- ----------------------
----- ----------------
----- ---------------- ----------------------------------------------------
-------
------
------- -----------------------------
------- --------------------------------------------------------
------- -----------------------------------------------------------
--------
--- ----- - -----
-------------------------- -------- -- -
-- ------- -
--------------------
-
----- - ------------- -- -
---------------
----- ----------
-------- --------
-------- -----
---- ------
----- ------
---------- -----------
------ -----------------------
----------- -------
------------ -------
---
-- ------
---
---------
-------
-------总结
常用消息 npm 包 common-message 是我们在进行前端开发时十分常用的一款工具，在项目开发中可以帮助我们更加方便、快捷地添加提示信息功能。上文主要介绍了 common-message 的使用方法、特点以及详细参数说明，并给出了一个完整的使用示例。因此，希望可以对广大前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f727758395b
