1.3.0 • Published 4 months ago

qmsg v1.3.0

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

Message.js

  • 最新版本:npm version

插件描述: 一款优雅的原生JS页面消息提示插件,兼容性良好,无任何依赖。

使用

npm install qmsg
// 或者
pnpm add qmsg

声明: 此插件非笔者原创,笔者只做了部分内容的修改,以符合个人需求。以下为原插件来源信息:

message.js

使用:

目前是把CSS集成到JS文件中了。

html引入:

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

油猴引入

// @require https://github.com/WhiteSevs/Message.js/raw/master/src/message.js

全局配置

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

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

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

参数名类型描述默认
animationBoolean是否使用弹出动画true
autoCloseBoolean是否自动关闭true
contentNumber提示的消息内容
htmlBoolean是否将内容作为 html 渲染false
isHTMLBoolean(同上)是否将内容作为 html 渲染false
positionString弹出位置 topleft、top、topright、left、center、right、bottomleft、bottom、bottomright,不区分大小写top
maxNumsNumber页面中最多显示消息(autoClose: true)的数量5
onCloseFunction关闭时的回调函数null
showCloseBoolean是否显示关闭图标false
showIconBoolean是否显示左边的图标true
showMoreContentBoolean是否显示更多内容(换行)false
showReverseBoolean是否使弹出方式逆反false
timeoutNumber自动关闭时,消息的持续显示时间,单位 ms2500
typeString弹出类型info
zIndexNumberz-index的层级50000
styleString由于Qmsg在ShadowRoot内,需要更改CSS时,在这里设置即可级
customClassString自定义的className
isLimitWidthBoolean是否限制宽度false
limitWidthNumNumber限制宽度的数值200
limitWidthWrap"no-wrap" | "wrap"| "ellipsis"当超出限制宽度时,是否换行还是显示为省略号"no-wrap"
consoleLogContentBoolean是否在控制台打印信息false

Qmsg支持的方法

// 配置
Qmsg.config()
// 信息
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()

setText(text:String)

对已弹出的内容进行修改

aMsg.setText("这是进行修改的info消息")

setHTML(html:String)

对已弹出的内容进行修改

aMsg.setHTML("<a href='javascript:;' target='_blank'>这是进行修改的info消息超链接</a>")

关闭左边的图标显示

Qmsg.config({
    showIcon: false
})
Qmsg.info("这个没有图标")
// 或者
Qmsg.info("这个没有图标",{
    showIcon: false
})

设置九宫格位置弹出

Qmsg.info("左上角",{
    position: "topleft"
})

Qmsg.info("顶部",{
    position: "top"
})

Qmsg.info("右上角",{
    position: "topright"
})

Qmsg.info("左边",{
    position: "left"
})

Qmsg.info("中间",{
    position: "center"
})

Qmsg.info("右边",{
    position: "right"
})

Qmsg.info("左下角",{
    position: "bottomleft"
})

Qmsg.info("底部",{
    position: "bottom"
})

Qmsg.info("右下角",{
    position: "bottomright"
})
1.2.8

7 months ago

1.2.7

8 months ago

1.2.6

8 months ago

1.3.0

4 months ago

1.2.5

9 months ago

1.2.4

9 months ago

1.2.3

10 months ago

1.2.2

10 months ago

1.2.1

12 months ago

1.2.0

12 months ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago