Message

一款优雅的原生JS页面消息提示插件，兼容性良好，无任何依赖。 An elegant native JS page message prompt plug-in, good compatibility, no dependency.

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/462234/1569735/Message.js

提问、发表评价，或者举报这个脚本。

作者: WhiteSevs
版本: 0.0.1.20250412091626
创建于: 2023-03-21
更新于: 2025-04-12
大小: 56.0 KB
许可证: 暂无

Qmsg

最新版本：

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

使用

npm install qmsg
// 或者
pnpm add qmsg

声明： 此插件非笔者原创，笔者对原项目使用ts进行重构，让开发者可以使用代码提示。以下为原插件来源信息：

原作者：或许吧（jesseqin）
转载地址：https://www.jq22.com/jquery-info23550

Qmsg

使用：

html 引入：

<!-- your html -->
<script src="https://fastly.jsdelivr.net/npm/qmsg@1.2.8/dist/index.umd.min.js"></script>
<script>
    var configs = {};
    // configs 为配置参数，可省略
    Qmsg.info("这是提示消息", configs);
</script>

油猴引入

// @require https://fastly.jsdelivr.net/npm/qmsg@1.3.1/dist/index.umd.min.js

全局配置

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

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

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

参数名	类型	描述	默认
animation	Boolean	是否使用弹出动画	true
autoClose	Boolean	是否自动关闭	true
content	Number	提示的消息内容	空
html	Boolean	是否将内容作为 html 渲染	false
isHTML	Boolean	（同上）是否将内容作为 html 渲染	false
position	String	弹出位置 topleft、top、topright、left、center、right、bottomleft、bottom、bottomright，不区分大小写	top
maxNums	Number	页面中最多显示消息(autoClose: true)的数量	5
onClose	Function	关闭时的回调函数	null
showClose	Boolean	是否显示关闭图标	false
showIcon	Boolean	是否显示左边的图标	true
showMoreContent	Boolean	是否显示更多内容(换行)	false
showReverse	Boolean	是否使弹出方式逆反	false
timeout	Number	自动关闭时，消息的持续显示时间，单位 ms	2500
type	String	弹出类型	info
zIndex	Number	z-index 的层级	50000
style	String	由于 Qmsg 在 ShadowRoot 内，需要更改 CSS 时，在这里设置即可级
customClass	String	自定义的 className
isLimitWidth	Boolean	是否限制宽度	false
limitWidthNum	Number	限制宽度的数值	200
limitWidthWrap	"no-wrap" \	"wrap"\	"ellipsis"
consoleLogContent	Boolean	是否在控制台打印信息	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",
});

欢迎访问Greasy Fork镜像