Pxmu.js：一个轻量级的移动端消息提示框插件

Vedu • 2021-07-19 06:53 • 资源分享 • 阅读 1301

介绍

Pxmu.js是一个专门为移动设备Web打造的消息提示框插件，无需任何依赖额外依赖,即可运行。由于全局使用flex布局，因此具备良好的兼容性，PC端也可以无缝运行。专注于打造提示组件，所以其能力要相对于其它的框架内组件稍强一些，具备精美的样式以及可以自定义动画、字体、颜色等！

Github

https://github.com/shiyueGG/pxmu

功能

Pxmu有常用的 toast、diaglog、success 、loading、copy 等。下面就简单说明下使用方式

引入相关js

<script type=”text/javascript” src=”pxmu.min.js”></script>

Toast

使用方法：

pxmu.toast({})
pxmu.toast('内容')

参数可选：

{
    msg: '操作成功', //内容 不能为空
    time: 2500, //停留时间 默认2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
    color: '#fff', //文字颜色 默认白色
    location: 'bottom',//居中center 顶部top 底部bottom默认
}

Diaglog

使用方法：

pxmu.diaglog({})//结果返回promise
pxmu.diaglog('内容')

由于参数过多这里不便于展示，如图片不清晰可以查看官方文档：

使用方法：

pxmu.loading({})
pxmu.loading('正在加载。。。')

参数可选：

{
    msg: '正在加载', //loading信息 为空时不显示文本
    time: 2500, //停留时间 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字颜色
    animation: 'fade', //动画名 详见动画文档
    close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
    inscroll: false, //模态 不可点击和滚动
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}

可手动关闭：

pxmu.closeload(100);//延时100毫秒关闭 默认0

Success

使用方法：

pxmu.success({})
pxmu.success('加载完成')

参数可选：

{
    msg: '加载完成', //loading信息 为空时不显示文本
    time: 2500, //停留时间 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字颜色
    animation: 'fade', //动画名 详见动画文档
    close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
    inscroll: false, //模态 不可点击和滚动
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}

也可手动关闭：

pxmu.closeload(100);//延时100毫秒关闭 默认0

Fail

Fail对标Success

pxmu.fail({});
pxmu.fail('加载超时');

参数可选：

{
    msg: '加载超时', //loading信息 为空时不显示文本
    time: 2500, //停留时间 
    bg: 'rgba(0, 0, 0, 0.65)', //背景色
    color: '#fff', //文字颜色
    animation: 'fade', //动画名 详见动画文档
    close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
    inscroll: false, //模态 不可点击和滚动
    inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}

手动关闭：

pxmu.closeload(100);//延时100毫秒关闭 默认0

Copy

快速复制一段文本，或复制指定dom下的文本内容

使用方法：

pxmu.copy({})

<div data-pxmu-copy-text="复制的内容">点我复制</div>

pxmu.copy({
    el: '#test' //复制id为test下的内容，
});

//或者

pxmu.copy({
    el: '.test' //复制class为test下的内容，
});

ToTop

快速回到页面顶部（带动画）

使用方法：

pxmu.totop()

全局配置

// 全局重叠设置
pxmu.overlap({
    loading : true,//是否不重叠弹出层 默认true不重叠。为false时会重叠消息层
    toast : true,//是否不重叠弹出层 默认true不重叠。为false时会重叠消息层
});

总结

pxmu是开发中常用的一个小插件，在某些项目中非常实用，特别是针对一些小页面小应用的场景，当然在大型应用中也可以使用。总体来说使用感受不错，样式也非常符合现代页面的审美，兼容性强，自定义能力强，同时还具备动画设计，是非常不错的一个小插件，推荐给部分需要的人！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/25912.html

Pxmu.js：一个轻量级的移动端消息提示框插件

介绍

Github

功能

总结

相关推荐

发表评论