實現消息提示組件

實現消息提示組件

在瀏覽器頁面中,通用的消息提示組件一般可以分爲靜態局部提示和動態全局提示,用於反饋用戶需要關注的信息,使用頻率較高。

實現

實現消息提示組件,動態全局提示,主要使用原生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/
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章