1.分析

當消息被觸發的時候，會有一個自上而下的淡入過程。
在持續了一段時間后會自動的消失，或者是需要用戶來手動的點擊關閉按鈕。
在消息消失的時候，會有一個自下而上的淡出過程。
消息是可以疊加彈出的，最新的消息會排在消息列表的最后面。
當前面的消息消失后，后面的消息會有一個向上滑動效果。
然后消息本身是有三部分組成

消息圖標，用來區分不同類型的消息。
消息文本。
關閉按鈕，并不是所有消息都需要關閉按鈕。

2. 實現樣式

那么，不管我們是用原生js還是vue，首先呢，我們都需要把這個消息的基本樣式給寫出來，然后再通過js來控制消息的彈出和關閉。
所以，我們先來寫html和css。

<!-- message.html --> <!-- 這個css是我引用阿里的一些字體圖標，請戳： https://www.iconfont.cn/ --><link rel="stylesheet" ><link rel="stylesheet" href="./message.css" rel="external nofollow" ><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;}