/** *auth: liuyu 4654081@qq.com *Date: 2021/7/31 *Desc: layui消息提示插件 * */ layui.define(function (exports) { "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 = { msg: "", //文字内容 position: 'topCenter', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center duration: 2000, //默认2秒关闭 showClose: true //显示关闭按钮 }; var notify = { info: function info() { initConfig(arguments, "info"); }, success: function success() { initConfig(arguments, "success"); }, warning: function warning() { initConfig(arguments, "warning"); }, error: function error() { initConfig(arguments, "error"); }, loading: function loading() { return initConfig(arguments, "loading"); }, 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) { var args = {}; for (var key in initArgs) { args[key] = initArgs[key]; } var posArr = ["bottomRight", "bottomLeft", "topRight", "topLeft", "topCenter", "bottomCenter", "center"]; for (var i = 0; i < obj.length; i++) { var it = obj[i]; if (it !== undefined) { if (typeof it == "string" || _typeof(it) === "object") { if (posArr.indexOf(it) > -1) { args.position = it; } else { args.msg = it; } } else if (typeof it == "boolean") { args.showClose = it; } else if (typeof it == "function") { args.onClose = it; } else if (typeof it == "number") { args.duration = it; } } } args.type = type; return createMsgEl(args); } var msgWrappers = new Array(); function createMsgEl(args) { var _msgWrapper; var type = args.type, duration = args.duration, msg = args.msg, position = args.position, closable = args.showClose, 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 el = c({ className: "notify-msg-wrapper" }, [c({ className: "notify-msg notify-msg-fade-in " + 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); } } }, getMsgRight(closable))])]); 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); }); } else { setTimeout(function () { closeMsg(el, onClose, _msgWrapper); }, duration); } } if (type != "loading") { setTimeout(function () { closeMsg(el, onClose, _msgWrapper); }, duration); } if (!_msgWrapper.children.length) { document.body.appendChild(_msgWrapper); } _msgWrapper.appendChild(el); css(el, { height: el.offsetHeight + "px" }); setTimeout(function () { removeClass(el.children[0], "notify-msg-fade-in"); }, 300); if (type == "loading") { return function () { closeMsg(el, onClose, _msgWrapper); }; } } function getMsgRight(showClose) { if (showClose) { //if (1 == 1) {//永远显示关闭按钮 return "\n \n "; } else { return "\n \n \n \n "; } } var flag = true; //正常关闭标志 var closeFlag = false;//点击关闭按钮标志 function closeMsg(el, cb, _msgWrapper) { if (!el) return; css(el, { padding: 0, height: 0 }); addClass(el.children[0], "notify-msg-fade-out"); 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
\n \n \n \n
\n " }; } function removeChild(el) { el && el.parentNode.removeChild(el); } function _destroyAll() { for (var j = 0; j < msgWrappers.length; j++) { for (var i = 0; i < msgWrappers[j].children.length; i++) { var element = msgWrappers[j].children[i]; closeMsg(element, '', msgWrappers[j]); } } } window.addEventListener('DOMContentLoaded', function () { insertCssInHead(); }); function insertCssInHead() { var doc = document; if (doc && doc.head) { var head = doc.head; var _css = doc.createElement('style'); var cssStr = "\n\n[class|=notify],[class|=notify]::after,[class|=notify]::before{box-sizing:border-box;outline:0}.notify-msg-progress{width:13px;height:13px}.notify-msg__circle{stroke-width:2;stroke-linecap:square;fill:none;transform:rotate(-90deg);transform-origin:center}.notify-msg-stage:hover .notify-msg__circle{-webkit-animation-play-state:paused!important;animation-play-state:paused!important}.notify-msg__background{stroke-width:2;fill:none}.notify-msg-stage{position:fixed;width:auto;z-index:99891015}.topLeft{top: 20px;left: 20px;}.topCenter{top: 20px;left: 50%;transform:translate(-50%,0)}.topRight{top: 20px;right: 20px;}.bottomLeft{bottom: 20px;left: 20px;}.bottomCenter{bottom: 20px;left: 50%;transform:translate(-50%,0)}.bottomRight{bottom: 20px;right: 20px;}.center{top: 50%;left: 50%;transform:translate(-50%,-50%)}.notify-msg-wrapper{position:relative;left:50%;transform:translate(-50%,0);transform:translate3d(-50%,0,0);transition:height .3s ease,padding .3s ease;padding:6px 0;will-change:transform,opacity}.notify-msg{padding:15px 21px;border-radius:3px;position:relative;left:50%;transform:translate(-50%,0);transform:translate3d(-50%,0,0);display:flex;align-items:center}.notify-msg-content,.notify-msg-icon,.notify-msg-wait{display:inline-block}.notify-msg-icon{position:relative;width:13px;height:13px;border-radius:100%;display:flex;justify-content:center;align-items:center}.notify-msg-icon svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px}.notify-msg-wait{width:20px;height:20px;position:relative;fill:#4eb127}.notify-msg-wait svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.notify-msg-close{width:14px;height:14px;}.notify-msg-content{margin:0 10px;min-width:240px;text-align:left;font-size:14px;font-weight:500;font-family:-apple-system,Microsoft Yahei,sans-serif;text-shadow:0 0 1px rgba(0,0,0,.01)}.notify-msg.info{color:#0fafad;background-color:#e7fdfc;box-shadow:0 0 2px 0 rgba(0,1,1,.01),0 0 0 1px #c0faf9}.notify-msg.info .notify-msg-icon{background-color:#0fafad}.notify-msg.success{color:#4ebb23;background-color:#f3ffe8;box-shadow:0 0 2px 0 rgba(0,1,0,.01),0 0 0 1px #d9f8bb}.notify-msg.success .notify-msg-icon{background-color:#4ebb23}.notify-msg.warning{color:#f1b306;background-color:#fff9eb;box-shadow:0 0 2px 0 rgba(1,1,0,.01),0 0 0 1px #fcf2cd}.notify-msg.warning .notify-msg-icon{background-color:#f1b306}.notify-msg.error{color:#f34b51;background-color:#fff7f7;box-shadow:0 0 2px 0 rgba(1,0,0,.01),0 0 0 1px #ffe3e3}.notify-msg.error .notify-msg-icon{background-color:#f34b51}.notify-msg.loading{color:#0fafad;background-color:#e7fdfc;box-shadow:0 0 2px 0 rgba(0,1,1,.01),0 0 0 1px #c2faf9}.notify-msg_loading{flex-shrink:0;width:20px;height:20px;position:relative}.notify-msg-circular{-webkit-animation:notify-msg-rotate 2s linear infinite both;animation:notify-msg-rotate 2s linear infinite both;transform-origin:center center;height:18px!important;width:18px!important}.notify-msg-path{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:#0fafad;-webkit-animation:notify-msg-dash 1.5s ease-in-out infinite;animation:notify-msg-dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes notify-msg-rotate{100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes notify-msg-rotate{100%{transform:translate(-50%,-50%) rotate(360deg)}}@-webkit-keyframes notify-msg-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes notify-msg-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.notify-msg.info .notify-msg-wait{fill:#0fafad}.notify-msg.success .notify-msg-wait{fill:#4ebb23}.notify-msg.warning .notify-msg-wait{fill:#f1b306}.notify-msg.error .notify-msg-wait{fill:#f34b51}.notify-msg.loading .notify-msg-wait{fill:#0fafad}.notify-msg-pointer{cursor:pointer}@-webkit-keyframes notify-msg_info{0%{stroke:#0fafad}to{stroke:#0fafad;stroke-dasharray:0 100}}@keyframes notify-msg_info{0%{stroke:#0fafad}to{stroke:#0fafad;stroke-dasharray:0 100}}@-webkit-keyframes notify-msg_success{0%{stroke:#4eb127}to{stroke:#4eb127;stroke-dasharray:0 100}}@keyframes notify-msg_success{0%{stroke:#4eb127}to{stroke:#4eb127;stroke-dasharray:0 100}}@-webkit-keyframes notify-msg_warning{0%{stroke:#fcbc0b}to{stroke:#fcbc0b;stroke-dasharray:0 100}}@keyframes notify-msg_warning{0%{stroke:#fcbc0b}to{stroke:#fcbc0b;stroke-dasharray:0 100}}@-webkit-keyframes notify-msg_error{0%{stroke:#eb262d}to{stroke:#eb262d;stroke-dasharray:0 100}}@keyframes notify-msg_error{0%{stroke:#eb262d}to{stroke:#eb262d;stroke-dasharray:0 100}}.notify-msg-fade-in{-webkit-animation:notify-msg-fade .2s ease-out both;animation:notify-msg-fade .2s ease-out both}.notify-msg-fade-out{animation:notify-msg-fade .3s linear reverse both}@-webkit-keyframes notify-msg-fade{0%{opacity:0;transform:translate(-50%,0);transform:translate3d(-50%,-80%,0)}to{opacity:1;transform:translate(-50%,0);transform:translate3d(-50%,0,0)}}@keyframes notify-msg-fade{0%{opacity:0;transform:translate(-50%,0);transform:translate3d(-50%,-80%,0)}to{opacity:1;transform:translate(-50%,0);transform:translate3d(-50%,0,0)}}\n "; _css.innerHTML = cssStr; if (head.children.length) { head.insertBefore(_css, head.children[0]); } else { head.appendChild(_css); } } } return notify; }); //输出接口 exports('notify', notify); });