npm 包 common-message 使用教程

阅读时长 6 分钟读完

在前端开发中,我们经常需要在网站的交互过程中输出一些更人性化、友好的提示信息(如错误信息提示、成功信息提示、系统提示等)。 在这种情况下,通用消息 npm 包即使得我们可以更加方便、快捷地为项目添加这些提示信息功能。

common-message 是什么?

Common-message 是一款基于 jQuery 实现的能够在网页交互过程中创建、展示提示信息的 npm 包。该包具有以下特点:

  • 可以自由设置时间、样式和展示位置等等;
  • 支持动画效果,使得提示信息展示更加美观、俏皮;
  • 可以支持开发者自行上传图片,增加提示信息的图像化程度。

如何使用 common-message?

安装 common-message

在项目运行目录下使用以下命令进行安装:

安装完成后,即可在项目中使用 common-message 了。

引入 common-message

在需要使用 common-message 的文件中引入 common-message 样式文件和 js 文件:

调用 common-message

在需要使用提示消息的地方,调用 common-message:

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

纠错
反馈