如何将Message组件改写为长尾词，实现发财UI示例详解？

本文共计359个文字，预计阅读时间需要2分钟。

目录- 引用- 支持的功能- 使用方法- 实现过程- 如何实现不同类型的切换- 如何实现Message的弹出和消失- 如何实现向下排序而非堆叠- 如何实现添加和移除.message-active类- 如何将隐藏的内容显示出来

目录

• 引言
• 支持的功能
• 使用方法
• 实现过程
• 如何实现不同类型的切换？
• 如何实现Message的弹出和消失？
• 如何实现往下排列而非堆叠？
• 如何实现添加和移除.message-active类？
• 如何将隐藏的Message从DOM树中移除
• 如何区分不同的Message？
• 最后的一个小细节

引言

最近在实现Message组件，就是会从屏幕顶端弹出的一个小提醒，过一会儿就消失了。我个人非常喜欢这个设计，感觉在后续的复用性也很高，于是就打算自己手写一个作为发财UI的组件

支持的功能

目前的Message有四种类型：

普通提醒 normal

成功提醒 success

警告提醒 warning

错误提醒error

同时还支持设置持续的时间：

使用方法

是不是非常简单