原生JS消息提示插件Message.js
2021-01-08 21:30
标签:span styles abs top 16px web 支持 return 实例 插件描述:一款优雅的页面消息提示插件,兼容性良好,无任何依赖。 Qmsg 消息提示插件 使用 全局配置 在引入message.js之前可以通过全局变量 QMSG_GLOBALS.DEFAULTS 来进行配置 或者通过 所有支持的配置信息如下: Qmsg支持的方法 以上方法均可传递1-2个参数,如下: 注意: 如需要自动关闭则需要如下调用: 关闭所有消息,包括 消息实例支持的方法和属性 关闭当前消息,会触发 销毁消息,不会触发 多久后关闭,单位ms,设置该值可动态修改该消息实例的关闭时间,前提是该消息实例的 message.min.js 转载https://www.jq22.com/jquery-info23550 原生JS消息提示插件Message.js 标签:span styles abs top 16px web 支持 return 实例 原文地址:https://www.cnblogs.com/sunbingqiang/p/JS.html
兼容IE>=9。
HTML
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.info()
Qmsg.warning()
Qmsg.error()
Qmsg.success()
Qmsg.loading()
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
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}}
!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
下一篇:实用网站收藏