实现消息提示组件

在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。

实现

实现消息提示组件，动态全局提示，主要使用原生JavaScript实现，实现的代码基本都作了注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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>

参考

1
2
3
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/