网页端操作提示「msg.js」库简介

这段时间我正在完成我的第一本个人图书，期间做了很多的案例，最近需要在网页端完成一个关于「恶意文本检测」的案例，为了让该案例表现的更加易用简洁、对用户友好，我需要在页面中添加一些用户操作提示信息，比如「正在加载」、「加载失败」、「加载成功」等信息提示，这些功能如果是在微信小程序上实现，那很方便，直接调用 wx.showModal()等方法即可，但是要在网页端实现该功能，就得依赖其他第三方JS和CSS了，在本文中，我们就来介绍一个库，它允许我们仅使用一个 <script/>标签引入其对应的资源文件，就可以简单快捷的使用其功能，请看效果：

图1 - 恶意文本检测用户操作提示

参考资料

1. gitee链接：https://gitee.com/mail_osc/msg#http://res.weiunity.com/msg/demo.html

1. 快速体验

关于该案例的演示demo，大家可以参考如下两个网址：

1. msg官方demo
   演示网址：http://res.weiunity.com/msg/demo.html
   效果图：
   

图2 - msg demo官方演示案例

2. 个人网站关于恶意文本检测的案例
   演示网址：https://www.shipudong.com/toxicity/view/index.html
   效果图：
   

图3 - 恶意文本检测演示案例

2. 快速使用

1. 引入msg.js库

<script src="https://res.weiunity.com/msg/msg.js"></script>

2. 使用库

• 信息提示，2.5秒后自动关闭

msg.info('Hello Msg')

• 成功提示，1.5秒后自动关闭

msg.success('操作成功')

• 失败提示，2.5秒后自动关闭

msg.failure('操作失败');

• 加载提示，图中会有一张动图一直转圈，它不会自动关闭，所以必须与 msg.close()配合使用

msg.loading