html消息提示框封装，默认，失败，警告，成功四个状态

message.none(\"请输入用户名\");message.error(\"请输入搜索内容\");message.info(\"请输入用户名\");message.success(\"登录成功\");

封装了四种样式 默认，成功，失败，警告 

// 消息提示弹窗const message = (function () { let zIndex = 999; let marginTop = \"26rem\"; let lastMessage = null; // 存储上一个提示框元素 const iconMap = { info: \"https://phadwiki-1308066085.file.myqcloud.com/phadcalc/images/info.png\", error: \"https://phadwiki-1308066085.file.myqcloud.com/phadcalc/images/error.png\", success: \"https://phadwiki-1308066085.file.myqcloud.com/phadcalc/images/succee.png\", }; const styleMap = { none: { bgColor: \"rgba(0, 0, 0, 0.6)\", borderColor: \"none\", color: \"#fff\" }, info: { bgColor: \"#edf2fc\", borderColor: \"#ebeef5\", color: \"#909399\" }, error: { bgColor: \"#fef0f0\", borderColor: \"#fde2e2\", color: \"#f56c6c\" }, success: { bgColor: \"#f0f9eb\", borderColor: \"#e1f3d8\", color: \"#67c23a\" }, }; function clearLastMessage() { if (lastMessage) { lastMessage.classList.add(\"message-out\"); setTimeout(() => { lastMessage.remove(); lastMessage = null; }, 300); } } function createMessageElement(type, val) { const style = styleMap[type] || styleMap.none; const icon = iconMap[type] || \"\"; const div = document.createElement(\"div\"); div.className = \"message_list message-in\"; div.style.cssText = ` z-index: ${zIndex++}; position: fixed; left: 50%; transform: translateX(-50%); top: ${marginTop}; background-color: ${style.bgColor}; border: 1px solid ${style.borderColor}; padding: 8px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); display: flex; align-items: center; pointer-events: auto; transition: opacity 0.3s ease, transform 0.3s ease; `; const img = document.createElement(\"img\"); img.src = icon; img.alt = type; img.style.cssText = ` width: 16px; height: 16px; margin-right: 8px; display: ${icon ? \"inline-block\" : \"none\"}; `; const span = document.createElement(\"span\"); span.textContent = val; span.style.cssText = ` color: ${style.color}; font-size: 14px; `; div.appendChild(img); div.appendChild(span); return div; } function showMessage(type, val, time = 1000) { clearLastMessage(); const messageEl = createMessageElement(type, val); document.body.appendChild(messageEl); lastMessage = messageEl; setTimeout(() => { messageEl.classList.remove(\"message-in\"); messageEl.classList.add(\"message-out\"); setTimeout(() => { if (messageEl) { messageEl.remove(); if (lastMessage === messageEl) { lastMessage = null; } } }, 300); }, time); return this; } return { none(val, time) { return showMessage.call(this, \"none\", val, time); }, info(val, time) { return showMessage.call(this, \"info\", val, time); }, error(val, time) { return showMessage.call(this, \"error\", val, time); }, success(val, time) { return showMessage.call(this, \"success\", val, time); }, };})();