前端小技巧：用原生js写一个弹窗消息提醒插件

嗨，这里是芝麻，今天我们一块来做一个“弹窗消息提醒”插件。

喏，就是这么一个效果。

1. 分析

1. 当消息被触发的时候，会有一个自上而下的淡入过程。
2. 在持续了一段时间后会自动的消失，或者是需要用户来手动的点击关闭按钮。
3. 在消息消失的时候，会有一个自下而上的淡出过程。
4. 消息是可以叠加弹出的，最新的消息会排在消息列表的最后面。
5. 当前面的消息消失后，后面的消息会有一个向上滑动效果。

然后消息本身是有三部分组成

1. 消息图标，用来区分不同类型的消息。
2. 消息文本。
3. 关闭按钮，并不是所有消息都需要关闭按钮。

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;
}
复制代码