实现消息提示组件
实现消息提示组件
在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。
实现
实现消息提示组件，动态全局提示，主要使用原生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/
