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);},};
})();