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

2024-04-06 20:40:50

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

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
})

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

参数名 类型 描述 默认
showClose Boolean 是否显示关闭图标 false
timeout Number 多久后自动关闭，单位ms 2000
autoClose Boolean 是否自动关闭 true
content String 提示的内容 ''
onClose Function 关闭的回调函数 null
html Boolean 是否将内容作为html渲染 false
maxNums Number 最多显示消息(autoClose:true)的数量 5

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

上一篇：html 元素的隐藏与显示


下一篇：css-img 的src为空时怎么让裂图消失?