實現消息提示組件
在瀏覽器頁面中,通用的消息提示組件一般可以分爲靜態局部提示和動態全局提示,用於反饋用戶需要關注的信息,使用頻率較高。
實現
實現消息提示組件,動態全局提示,主要使用原生JavaScript
實現,實現的代碼基本都作了註釋。
<!DOCTYPE html>
<html>
<head>
<title>Message</title>
<style type="text/css">
@keyframes enter { /* 入場動畫 */
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.msg-unit{ /* 橫幅容器 */
font-size: 13px;
position: fixed;
left: calc(50% - 150px);
width: 300px;
padding: 10px;
border-radius: 3px;
animation: enter 0.3s;
transition: all .5s;
display: flex;
align-items: center;
}
.msg-hide{ /* 隱藏時動畫 */
opacity: 0;
transform: translateY(-50px);
}
.msg-unit > .msg-icon{ /* 圖標 */
font-size: 15px;
margin: 0 7px;
}
</style>
<!-- 引用圖標庫 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<button onclick="msg('這是一條info', 'info')">Info</button>
<button onclick="msg('這是一條success', 'success')">Success</button>
<button onclick="msg('這是一條warning', 'warning')">Warning</button>
<button onclick="msg('這是一條error', 'error')">Error</button>
</body>
<script type="text/javascript">
(function(win, doc){
const body = doc.body; // 容器
const msgList = []; // 維護消息數組隊列
const baseTop = 15; // 基礎距頂高度
const multiplyTop = 46; // 乘積基礎高度
const msgTypeMap = { // 類型
"info": {background: "#EBEEF5", border: "#EBEEF5", color: "#909399", icon: "fa fa-info-circle"},
"success": {background: "#f0f9eb", border: "#e1f3d8", color: "#67C23A", icon: " fa fa-check-circle-o"},
"warning": {background: "#fdf6ec", border: "#faecd8", color: "#E6A23C", icon: " fa fa-exclamation-circle"},
"error": {background: "#fef0f0", border: "#fde2e2", color: "#F56C6C", icon: "fa fa-times-circle-o"},
}
const create = (msg, type) => {
const unit = doc.createElement("div"); // 外層容器
unit.className = "msg-unit"; // 設置樣式
const typeInfo = msgTypeMap[type] === void 0 ? msgTypeMap["info"] : msgTypeMap[type]; // 取得類型
unit.style.background = typeInfo.background; // 設置背景色
unit.style.color = typeInfo.color; // 設置文字顏色
unit.style["border"] = `1px solid ${typeInfo.border}`; // 設置邊框顏色
const i = doc.createElement("i"); // 圖標承載容器
i.className = `${typeInfo.icon} msg-icon`; // 設置圖標類型以及樣式
const span = doc.createElement("span"); // 文字容器
span.innerText = msg; // 避免XSS
unit.appendChild(i); // 加入外層容器
unit.appendChild(span); // 加入外層容器
unit.style.top = msgList.length * multiplyTop + baseTop + "px"; // 計算高度
return unit; // 返回最外層容器
}
const computedTop = () => msgList.forEach((v, index) => v.style.top = index * multiplyTop + baseTop + "px"); // 遍歷計算距頂距離
const show = (msg, type) => {
const unit = create(msg, type); // 創建元素
msgList.push(unit); // 加入隊列
body.appendChild(unit); // 加入body
setTimeout(() => { // 定時器
msgList.shift(unit); // 出隊
computedTop(); // 重新計算高度
const finish = () => {
body.removeChild(unit); // 移出body
unit.removeEventListener("transitionend", finish); // 移除監聽器
}
unit.addEventListener("transitionend", finish); // 添加監聽器
unit.classList.add("msg-hide"); // 觸發移除過渡動畫
}, 3000); // 3秒延時觸發
}
win.msg = (msg, type = "info") => show(msg, type); // 加入window對象
})(window, document);
</script>
</html>
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://element.eleme.cn/#/zh-CN/component/message
http://kmanong.top/kmn/qxw/form/article?id=62470&cate=52
https://jancat.github.io/post/2020/design-a-pair-of-general-message-prompt-components-alert-and-toast/