/** *auth: liuyu 4654081@qq.com *Date: 2024/5/27 *Desc: 消息提示插件-支持自定义位置显示 **/ "use strict"; function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } !function (global, factory) { (typeof exports === "undefined" ? "undefined" : _typeof(exports)) === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define(factory) : (global = global || self, global.notify = factory()); }(void 0, function () { "use strict"; function c(args, children) { var el = document.createElement("div"); for (var key in args) { var element = args[key]; if (key === "className") { key = "class"; el.setAttribute(key, element); } else if (key[0] === "_") { el.addEventListener(key.slice(1), element); } } if (typeof children == "string") { el.innerHTML = children; } else if (_typeof(children) === "object" && children.tagName) { el.appendChild(children); } else if (children) { for (var i = 0; i < children.length; i++) { var child = children[i]; el.appendChild(child); } } return el; } function addAnimationEnd(el, fn) { ["a", "webkitA"].forEach(function (prefix) { var name = prefix + "nimationEnd"; el.addEventListener(name, function () { fn(); }); }); } function css(el, css) { for (var key in css) { el.style[key] = css[key]; } if (el.getAttribute("style") === "") { el.removeAttribute("style"); } } function addClass(el, s) { var c = el.className || ""; if (!hasClass(c, s)) { var arr = c.split(/\s+/); arr.push(s); el.className = arr.join(" "); } } function hasClass(c, s) { return c.indexOf(s) > -1 ? !0 : !1; } function removeClass(el, s) { var c = el.className || ""; if (hasClass(c, s)) { var arr = c.split(/\s+/); var i = arr.indexOf(s); arr.splice(i, 1); el.className = arr.join(" "); } if (el.className === "") { el.removeAttribute("class"); } } var initArgs = { elem:"body", // 默认显示在body,可以指定class或id msg: "", // 消息内容 closable: true, // 是否显示可关闭按钮 duration: 3000, // 默认3秒关闭 position: 'topCenter', // 显示位置 bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, vcenter shadow:false // 是否显示遮罩 }; var notify = { info: function info() { return initConfig(arguments, "info"); }, success: function success() { return initConfig(arguments, "success"); }, warning: function warning() { return initConfig(arguments, "warning"); }, error: function error() { return initConfig(arguments, "error"); }, loading: function loading() { let el=initConfig(arguments, "loading"); el.value=function(n) {//百分比数 //console.log(typeof n) if (typeof n === 'number') { // 确保传入的是字符串 el.querySelector(".notify-msg-text").innerHTML = n+"%"; if(n===100){ el.querySelector(".notify-msg-icon").innerHTML = getIconObj().success; el.querySelector(".notify-msg-loading").classList.add("notify-msg-success"); el.querySelector(".notify-msg-loading").classList.remove("notify-msg-loading"); } } } return el; }, alert: function loading() { return initConfig(arguments, "alert"); }, confirm: function loading() { return initConfig(arguments, "confirm"); }, close:function(element){ if (element && element.nodeType === Node.ELEMENT_NODE) { var parent = element.parentNode; closeMsg(element, '', parent); } else { console.warn('传入的参数不是一个有效的DOM元素'); } }, destroyAll: function destroyAll() { _destroyAll(); }, config: function config(obj) { for (var key in obj) { if (Object.hasOwnProperty.call(obj, key)) { if (obj[key] !== undefined) { initArgs[key] = obj[key]; } } } } }; function initConfig(obj, type) {//obj 参数列表 var args = {}; for (var key in initArgs) { args[key] = initArgs[key]; } if (typeof obj[0] == "string") { args.msg = obj[0]; } var _args = args;//拷贝一份,不污染初始化参数 if(type=="alert"||type=="confirm"){//默认上下居右 _args.position="vcenter"; } if(typeof obj[0] == "object"){ for (var prop in obj[0]) { if (Object.hasOwnProperty.call(obj[0], prop)) { _args[prop] = obj[0][prop]; } } } if(typeof obj[1] == "function"){ _args.onClose = obj[1]; } _args.type = type; return createMsgEl(_args); } var msgWrappers = new Array(); function createMsgEl(args) { var _msgWrapper; var type = args.type, elem = args.elem, duration = args.duration, msg = args.msg, position = args.position, closable = args.closable, shadow = args.shadow, onClose = args.onClose; var iconObj = getIconObj(); if (document.getElementsByClassName(position)[0]) { _msgWrapper = document.getElementsByClassName(position)[0]; } else { _msgWrapper = c({ className: "notify-msg-stage " + position }); msgWrappers.push(_msgWrapper); } if (type === "loading") { msg = msg === '' ? '正在加载,请稍后... ' : msg + ' '; //closable = false; //loading不显示关闭按钮 } var positionB=['bottomLeft','bottomCenter','bottomRight'];//页面下方弹出 var el,an; if(positionB.indexOf(position)!==-1){ if(type==="alert" || type ==="confirm"){ an="bounceIn"; }else{ an="notify-bottom notify-msg-fade-in-b"; } el = c({ className: "notify-msg-wrapper" }, [c({ className: "notify-msg " + an + " notify-msg-" + type }, [c({ className: "notify-msg-icon" }, iconObj[type]), c({ className: "notify-msg-content" }, msg), c({ className: "notify-msg-wait " + (closable ? "notify-msg-pointer" : ""), _click: function _click() { if (closable) { closeFlag = true; //点击关闭按钮标志 flag = false; //正常关闭标志 closeMsg(el, onClose, _msgWrapper,shadow); } } }, getMsgRight(closable,type))])]); }else{ if(position=="vcenter"){ an="bounceIn"; }else{ an="notify-msg-fade-in"; } el = c({ className: "notify-msg-wrapper" }, [c({ className: "notify-msg " + an + " notify-msg-" + type }, [c({ className: "notify-msg-icon" }, iconObj[type]), c({ className: "notify-msg-content" }, msg), c({ className: "notify-msg-wait " + (closable ? "notify-msg-pointer" : ""), _click: function _click() { if (closable) { closeFlag = true; //点击关闭按钮标志 flag = false; //正常关闭标志 closeMsg(el, onClose, _msgWrapper,shadow); } } }, getMsgRight(closable,type))])]); } var anm = el.querySelector(".notify-msg-circle"); if (anm) { css(anm, { animation: "notify-msg_" + type + " " + duration + "ms linear" }); if ("onanimationend" in window) { addAnimationEnd(anm, function () { closeMsg(el, onClose, _msgWrapper,shadow); }); } else { setTimeout(function () { closeMsg(el, onClose, _msgWrapper,shadow); }, duration); } } if (type !== "loading" && type !== "alert" && type !== "confirm" && duration != 0) { setTimeout(function () { closeMsg(el, onClose, _msgWrapper,shadow); }, duration); } //遮罩 if(shadow &&!document.querySelector(".notify-modal")){ var shadenode=document.createElement("div"); if(shadow){ shadenode.className="notify-modal"; }else{ shadenode.className="notify-modal notify-none"; } document.querySelector("body").appendChild(shadenode); } if (!_msgWrapper.children.length) { if(elem!=="body"){ var _pos=getComputedStyle(document.querySelector(elem)).position; if(_pos==="static"||_pos===""){ document.querySelector(elem).style.position="relative"; document.querySelector(elem).style.overflow = "hidden"; } _msgWrapper.style.position = "absolute"; }else{ _msgWrapper.style.position = "fixed"; } document.querySelector(elem).appendChild(_msgWrapper); } _msgWrapper.appendChild(el); if(type==="confirm"){ var btnCancel=document.createElement("button"); var textNode=document.createTextNode("取 消"); btnCancel.appendChild(textNode); btnCancel.className="btnCancel"; btnCancel.onclick=function(){ closeMsg(el,'', _msgWrapper,shadow); } document.querySelector(".notify-msg-confirm").appendChild(btnCancel); } css(el, { height: el.offsetHeight + "px" }); setTimeout(function () { if(positionB.indexOf(position)!==-1){ removeClass(el.children[0], "notify-msg-fade-in-b"); }else{ removeClass(el.children[0], "notify-msg-fade-in"); } }, 300); /* if (type === "loading") { return function () { closeMsg(el, onClose, _msgWrapper,shadow); }; }*/ return el; //return {el:el,msgWrapper:_msgWrapper,shadow:shadow}; } function getMsgRight(closable,type) { if (closable) { if(type==="alert" || type==="confirm"){ return '' }else{ return '\n \n '; } } } var flag = true; //正常关闭标志 var closeFlag = false;//点击关闭按钮标志 function closeMsg(el, cb, _msgWrapper,shadow) { if (!el) return; if(hasClass(el.children[0].className,"notify-bottom")){ addClass(el.children[0], "notify-msg-fade-out-b"); }else if(hasClass(el.children[0].className,"bounceIn")){ addClass(el.children[0], "bounceOut"); }else{ addClass(el.children[0], "notify-msg-fade-out"); } if(shadow && document.querySelector(".notify-modal")){ document.querySelector("body").removeChild(document.querySelector(".notify-modal")); } if (closeFlag) { //点击关闭按钮 closeFlag = false; cb && cb(); //回调方法 } else { if (flag) {//正常关闭,全局变量 cb && cb(); } else { flag = true // return; } } setTimeout(function () { if (!el) return; var has = false; if (_msgWrapper) { for (var i = 0; i < _msgWrapper.children.length; i++) { if (_msgWrapper.children[i] && _msgWrapper.children[i] === el) { has = true; } } has && removeChild(el); el = null; if (!_msgWrapper.children.length) { has && removeChild(_msgWrapper); } } }, 300); } function getIconObj() { return { info: '\n \n ', success: '\n \n ', warning: '\n \n ', error: '\n \n ', loading: '\n