原生JS消息提示插件Message.js

标签：span   styles   abs   top   16px   web   支持   return   实例   

插件描述：一款优雅的页面消息提示插件，兼容性良好，无任何依赖。

Qmsg 消息提示插件

使用
兼容IE>=9。
HTML

<link rel="stylesheet" href="./css/message.css">
<!-- your html -->
<script src="./js/message.js"></script>
<script>
    var configs = {};
    // configs 为配置参数，可省略
    Qmsg.info("这是提示消息",configs);
</script>

全局配置

在引入message.js之前可以通过全局变量 QMSG_GLOBALS.DEFAULTS 来进行配置

window.QMSG_GLOBALS = {
    DEFAULTS:{
        showClose:true,
        timeout:5000
    }
}

或者通过Qmsg.config({})来动态修改全局配置:

Qmsg.config({
    showClose:true,
    timeout:5000
})

所有支持的配置信息如下:

Qmsg支持的方法

Qmsg.info()
Qmsg.warning()
Qmsg.error()
Qmsg.success()
Qmsg.loading()

以上方法均可传递1-2个参数，如下：

Qmsg.loading("我是加载条");
Qmsg.info("给你个眼神，你懂得",{
    showClose:true,
    onClose:function(){
        console.log(‘我懂了‘)
    }
})
Qmsg.error({
    content:"1+1=3",
    timeout:5000
})

注意：Qmsg.loading()默认修改autoClose=false,一般来说需要手动关闭：

var loadingMsg = Qmsg.loading(‘我是加载条‘);
//do something
loadingMsg.close();

如需要自动关闭则需要如下调用:

Qmsg.loading("我是加载条",{
    autoClose:true
})
//或者
Qmsg.loading({
    autoClose:true,
    content:"我是加载条"
})
Qmsg.closeAll()

关闭所有消息，包括autoClose=false的消息

消息实例支持的方法和属性

var aMsg = Qmsg.info("这是个info消息")
close()

关闭当前消息,会触发onClose回调函数。

aMsg.close()
destroy()

销毁消息，不会触发onClose回调函数。

aMsg.destroy()
timeout

多久后关闭，单位ms,设置该值可动态修改该消息实例的关闭时间，前提是该消息实例的autoClose==true
需要文件
message.css

.qmsg.qmsg-wrapper{box-sizing:border-box;margin:0;padding:0;color:rgba(0,0,0,.55);font-size:13px;font-variant:tabular-nums;line-height:1;list-style:none;font-feature-settings:"tnum";position:fixed;top:16px;left:0;z-index:1010;width:100%;pointer-events:none}.qmsg .qmsg-item{padding:8px;text-align:center;-webkit-animation-duration:.3s;animation-duration:.3s;position:relative}.qmsg .qmsg-item .qmsg-count{text-align:center;position:absolute;left:-4px;top:-4px;background-color:red;color:#fff;font-size:12px;line-height:16px;border-radius:2px;display:inline-block;min-width:16px;height:16px;-webkit-animation-duration:.3s;animation-duration:.3s}.qmsg .qmsg-item:first-child{margin-top:-8px}.qmsg .qmsg-content{text-align:left;position:relative;display:inline-block;padding:10px 16px;background:#fff;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);pointer-events:all;max-width:80%;min-width:80px}.qmsg .qmsg-content [class^=qmsg-content-]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qmsg .qmsg-content .qmsg-content-with-close{padding-right:20px}.qmsg .qmsg-icon{display:inline-block;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;top:1px;margin-right:8px;font-size:16px}.qmsg .qmsg-icon svg{display:inline-block}.qmsg .qmsg-content-info .qmsg-icon{color:#1890ff;user-select:none}.qmsg .qmsg-icon-close{position:absolute;top:11px;right:5px;padding:0;overflow:hidden;font-size:12px;line-height:22px;background-color:transparent;border:none;outline:none;cursor:pointer;color:rgba(0,0,0,.45);transition:color .3s}.qmsg .qmsg-icon-close:hover>svg path{stroke:#555}.qmsg .animate-turn{animation:MessageTurn 1s linear infinite;-webkit-animation:MessageTurn 1s linear infinite}@keyframes MessageTurn{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(90deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(270deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes MessageTurn{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(90deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(270deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}@-webkit-keyframes MessageMoveIn{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}to{transform:translateY(0);transform-origin:0 0;opacity:1}}@keyframes MessageMoveIn{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}to{transform:translateY(0);transform-origin:0 0;opacity:1}}@-webkit-keyframes MessageShake{0%,100%{transform:translateX(0px);opacity:1}25%,75%{transform:translateX(-4px);opacity:.75}50%{transform:translateX(4px);opacity:.25}}@keyframes MessageShake{0%,100%{transform:translateX(0px);opacity:1}25%,75%{transform:translateX(-4px);opacity:.75}50%{transform:translateX(4px);opacity:.25}}

message.min.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e:"function"==typeof define&&define.amd?define([],function(){return e(t)}):t.Qmsg=e(t)}(this,function(t){"function"!=typeof Object.assign&&(Object.assign=function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");t=Object(t);for(var e=1;e<arguments.length;e++){var n=arguments[e];if(null!=n)for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}),"classList"in HTMLElement.prototype||Object.defineProperty(HTMLElement.prototype,"classList",{get:function(){var e=this;return{add:function(t){this.contains(t)||(e.className+=" "+t)},remove:function(t){this.contains(t)&&(t=new RegExp(t),e.className=e.className.replace(t,""))},contains:function(t){return-1!=e.className.indexOf(t)},toggle:function(t){this.contains(t)?this.remove(t):this.add(t)}}}});var l=t&&t.QMSG_GLOBALS&&t.QMSG_GLOBALS.NAMESPACE||"qmsg",a={opening:"MessageMoveIn",done:"",closing:"MessageMoveOut"},m=Object.assign({position:"center",type:"info",showClose:!1,timeout:2500,animation:!0,autoClose:!0,content:"",onClose:null,maxNums:5,html:!1},t&&t.QMSG_GLOBALS&&t.QMSG_GLOBALS.DEFAULTS),c={info:‘<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="#1890ff" stroke="#1890ff" stroke-width="4" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 11C25.3807 11 26.5 12.1193 26.5 13.5C26.5 14.8807 25.3807 16 24 16C22.6193 16 21.5 14.8807 21.5 13.5C21.5 12.1193 22.6193 11 24 11Z" fill="#FFF"/><path d="M24.5 34V20H23.5H22.5" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 34H28" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>‘,warning:‘<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="#faad14" stroke="#faad14" stroke-width="4" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 37C25.3807 37 26.5 35.8807 26.5 34.5C26.5 33.1193 25.3807 32 24 32C22.6193 32 21.5 33.1193 21.5 34.5C21.5 35.8807 22.6193 37 24 37Z" fill="#FFF"/><path d="M24 12V28" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>‘,error:‘<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#f5222d" stroke="#f5222d" stroke-width="4" stroke-linejoin="round"/><path d="M29.6569 18.3431L18.3432 29.6568" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3432 18.3431L29.6569 29.6568" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>‘,success:‘<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 4L29.2533 7.83204L35.7557 7.81966L37.7533 14.0077L43.0211 17.8197L41 24L43.0211 30.1803L37.7533 33.9923L35.7557 40.1803L29.2533 40.168L24 44L18.7467 40.168L12.2443 40.1803L10.2467 33.9923L4.97887 30.1803L7 24L4.97887 17.8197L10.2467 14.0077L12.2443 7.81966L18.7467 7.83204L24 4Z" fill="#52c41a" stroke="#52c41a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 24L22 29L32 19" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>‘,loading:‘<svg class="animate-turn" width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke="#1890ff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke="#1890ff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>‘,close:‘<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M14 14L34 34" stroke="#909399" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 34L34 14" stroke="#909399" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>‘},e=void 0!==(t=document.createElement("div").style).animationName||void 0!==t.WebkitAnimationName||void 0!==t.MozAnimationName||void 0!==t.msAnimationName||void 0!==t.OAnimationName;function g(){for(var t=l,e=0;e<arguments.length;++e)t+="-"+arguments[e];return t}function f(t){var e=this;e.settings=Object.assign({},m,t||{}),e.id=h.instanceCount;var n=(n=e.settings.timeout)&&parseInt(0<=n)&parseInt(n)<=Math.NEGATIVE_INFINITY?parseInt(n):m.timeout;e.timeout=n,e.settings.timeout=n,e.timer=null;var i=document.createElement("div"),o=c[e.settings.type||"info"],s=g("content-"+e.settings.type||"info");s+=e.settings.showClose?" "+g("content-with-close"):"";var r=e.settings.content||"",t=c.close,n=e.settings.showClose?‘<i class="qmsg-icon qmsg-icon-close">‘+t+"</i>":"",t=document.createElement("span");e.settings.html?t.innerHTML=r:t.innerText=r,i.innerHTML=‘<div class="qmsg-content">            <div class="‘+s+‘">                <i class="qmsg-icon">‘+o+"</i>"+t.outerHTML+n+"</div>        </div>",i.classList.add(g("item")),i.style.textAlign=e.settings.position;n=document.querySelector("."+l);n||((n=document.createElement("div")).classList.add(l,g("wrapper"),g("is-initialized")),document.body.appendChild(n)),n.appendChild(i),e.$wrapper=n,e.$elem=i,d(e,"opening"),e.settings.showClose&&i.querySelector(".qmsg-icon-close").addEventListener("click",function(){e.close()}.bind(i)),i.addEventListener("animationend",function(t){var e=t.target;t.animationName==a.closing&&(clearInterval(this.timer),this.destroy()),e.style.animationName="",e.style.webkitAnimationName=""}.bind(e)),e.settings.autoClose&&(e.timer=setInterval(function(){this.timeout-=10,this.timeout<=0&&(clearInterval(this.timer),this.close())}.bind(e),10),e.$elem.addEventListener("mouseover",function(){clearInterval(this.timer)}.bind(e)),e.$elem.addEventListener("mouseout",function(){"closing"!=this.state&&(this.timer=setInterval(function(){this.timeout-=10,this.timeout<=0&&(clearInterval(this.timer),this.close())}.bind(e),10))}.bind(e)))}function d(t,e){e&&a[e]&&(t.state=e,t.$elem.style.animationName=a[e])}function n(t,e){var n=Object.assign({},m);return 0===arguments.length?n:t instanceof Object?Object.assign(n,t):(n.content=t.toString(),e instanceof Object?Object.assign(n,e):n)}function i(t){t=t||{};var e,n,i,o,s=JSON.stringify(t),r=-1;for(n in this.oMsgs){var l=this.oMsgs[n];if(l.config==s){r=n,e=l.inst;break}}if(r<0){this.instanceCount++;var a={};a.id=this.instanceCount,a.config=s,(e=new f(t)).id=this.instanceCount,e.count="",a.inst=e,this.oMsgs[this.instanceCount]=a;var c=this.oMsgs.length,d=this.maxNums;if(d<c)for(var h=0,u=this.oMsgs;h<c-d;h++)u[h]&&u[h].inst.settings.autoClose&&u[h].inst.close()}else e.count=e.count?99<=e.count?e.count:e.count+1:2,i=e,o=g("count"),t=i.$elem.querySelector("."+g("content")),(a=t.querySelector("."+o))||((a=document.createElement("span")).classList.add(o),t.appendChild(a)),a.innerHTML=i.count,a.style.animationName="",a.style.animationName="MessageShake",i.timeout=i.settings.timeout||m.timeout;return e.$elem.setAttribute("data-count",e.count),e}f.prototype.destroy=function(){this.$elem.parentNode&&this.$elem.parentNode.removeChild(this.$elem),clearInterval(this.timer),h.remove(this.id)},f.prototype.close=function(){d(this,"closing"),e?h.remove(this.id):this.destroy();var t=this.settings.onClose;t&&t instanceof Function&&t.call(this)};var h={version:"0.0.1",instanceCount:0,oMsgs:[],maxNums:m.maxNums||5,config:function(t){m=t&&t instanceof Object?Object.assign(m,t):m,this.maxNums=m.maxNums&&0<m.maxNums?parseInt(m.maxNums):3},info:function(t,e){e=n(t,e);return e.type="info",i.call(this,e)},warning:function(t,e){e=n(t,e);return e.type="warning",i.call(this,e)},success:function(t,e){e=n(t,e);return e.type="success",i.call(this,e)},error:function(t,e){e=n(t,e);return e.type="error",i.call(this,e)},loading:function(t,e){e=n(t,e);return e.type="loading",e.autoClose=!1,i.call(this,e)},remove:function(t){this.oMsgs[t]&&delete this.oMsgs[t]},closeAll:function(){for(var t in this.oMsgs)this.oMsgs[t]&&this.oMsgs[t].inst.close()}};return h});

转载https://www.jq22.com/jquery-info23550

原生JS消息提示插件Message.js

标签：span   styles   abs   top   16px   web   支持   return   实例   

原文地址：https://www.cnblogs.com/sunbingqiang/p/JS.html