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

效果图

更新

更新时间：2020-12-09 22:35:02

更新说明：新增消息位置，html支持，消息计数上线为99等。

兼容性

兼容IE>=9

示例

<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。

下载