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

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

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

Qmsg 消息提示插件

使用
兼容IE>=9。
HTML

全局配置

在引入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‘,warning:‘‘,error:‘‘,success:‘‘,loading:‘‘,close:‘‘},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‘+t+"":"",t=document.createElement("span");e.settings.html?t.innerHTML=r:t.innerText=r,i.innerHTML=‘
            
                ‘+o+""+t.outerHTML+n+"
        
",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

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

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

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

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