My Green Dollar Message

基本

安装脚本后访问网站看效果：https://www.sogou.com/dollarmsg 会弹出原生实现的绿色的消息提示，三秒后消失。主要用于：在写简单脚本时，替代this.$message，不引入额外依赖。

用法

这是一条假装绿色的消息提示。

const message = new Message();
// message.show('这是一条消息提示');
message.show('这是一条消息提示', 'tick'); // 显示绿色勾图标的消息提示

解释

代码中，我们将消息提示功能封装成了一个名为 Message 的 class。在构造函数中，我们创建了一个 div 元素作为消息容器；在 show 方法中，我们将消息添加到容器中，并设置了定时器来自动移除消息。最后，我们可以根据需要实例化 Message 类，并调用其 show 方法来显示消息。希望这个示例能够帮助您理解如何使用类来进行进一步的封装。在上述脚本中，我们使用了SVG（可缩放矢量图形）来渲染白色对号，从而实现更符合您要求的图标效果。我们通过创建<svg>和<path>元素来生成一个带有白色对号的绿色圆形图标。同时在show方法内部增加了iconType参数，用于传递需要显示的图标类型。当iconType为'tick'时，创建了一个带有白色对号的绿色圆形图标，也就是对号图标。

访问地址

安装脚本后访问：https://www.sogou.com/dollarmsg 查看效果

Loading…

My Green Dollar Message

基本

用法

这是一条假装绿色的消息提示。

const message = new Message();
// message.show('这是一条消息提示');
message.show('这是一条消息提示', 'tick'); // 显示绿色勾图标的消息提示

解释

访问地址

安装脚本后访问：https://www.sogou.com/dollarmsg 查看效果