实现消息提示组件

实现消息提示组件

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

实现#

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

Copy
<!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>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
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/
posted @   WindRunnerMax  阅读(160)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
CONTENTS