嗨，这里是芝麻，今天我们一块来做一个“弹窗消息提醒”插件。
喏，就是这么一个效果。
1. 分析
-
当消息被触发的时候，会有一个
自上而下
的
淡入
过程。 -
在持续了一段时间后会
自动的消失
，或者是需要用户来手动的
点击关闭按钮
。 -
在消息消失的时候，会有一个
自下而上
的
淡出
过程。 -
消息是可以
叠加
弹出的，最新的消息会排在消息列表的
最后面
。 -
当前面的消息消失后，后面的消息会有一个
向上滑动
效果。
然后消息本身是有三部分组成
- 消息图标，用来区分不同类型的消息。
- 消息文本。
- 关闭按钮，并不是所有消息都需要关闭按钮。
2. 实现样式
那么，不管我们是用原生js还是vue，首先呢，我们都需要把这个消息的基本样式给写出来，然后再通过js来控制消息的弹出和关闭。 所以，我们先来写html和css。
<!-- message.html -->
<!-- 这个css是我引用阿里的一些字体图标，请戳： https://www.iconfont.cn/ -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1117508_wxidm5ry7od.css">
<link rel="stylesheet" href="./message.css">
<script src="./message.js"></script>
<!-- 消息外层容器，因为消息提醒基本上是全局的，所以这里用id，所有的弹出消息都是需要插入到这个容器里边的 -->
<div id="message-container">
<div class="message">
<!-- 消息图标 icon icon-success对应我的阿里字体图标的font-class -->
<div class="type icon icon-success"></div>
<!-- 消息文本 -->
<div class="text">这是一条正经的消息~</div>
<!-- 关闭按钮 -->
<div class="close icon icon-close"></div>
</div>
<div class="message">
<div class="type icon icon-error"></div>
<div class="text">这是一条正经的消息~</div>
</div>
</div>
复制代码/* message.css */
#message-container {
position: fixed;
left: 0;
top: 0;
right: 0;
/* 采用flex弹性布局，让容器内部的所有消息可以水平居中，还能任意的调整宽度 */
display: flex;
flex-direction: column;
align-items: center;
}
#message-container .message {
background: #fff;
margin: 10px 0;
padding: 0 10px;
height: 40px;
box-shadow: 0 0 10px 0 #eee;
font-size: 14px;
border-radius: 3px;
/* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
display: flex;
align-items: center;
}
#message-container .message .text {
color: #333;
padding: 0 20px 0 5px;
}
#message-container .message .close {
cursor: pointer;
color: #999;
}
/* 给每个图标都加上不同的颜色，用来区分不同类型的消息 */
#message-container .message .icon-info {
color: #0482f8;
}
#message-container .message .icon-error {
color: #f83504;
}
#message-container .message .icon-success {
color: #06a35a;
}
#message-container .message .icon-warning {
color: #ceca07;
}
#message-container .message .icon-loading {
color: #0482f8;
}
复制代码