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

pxmu是开发中常用的一个小插件,在某些项目中非常实用,特别是针对一些小页面小应用的场景,当然在大型应用中也可以使用。

介绍

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


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

Github

https://github.com/shiyueGG/pxmu

功能

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

  • 引入相关js

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

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

使用方法:

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

参数可选:

{
    msg: '操作成功', //内容 不能为空
    time: 2500, //停留时间 默认2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
    color: '#fff', //文字颜色 默认白色
    location: 'bottom',//居中center 顶部top 底部bottom默认
}
  • Diaglog
一个轻量级的移动端消息提示框插件——Pxmu.js

使用方法:

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

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

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

使用方法:

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.js

使用方法:

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
一个轻量级的移动端消息提示框插件——Pxmu.js

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.js

使用方法:

pxmu.copy({})
<div data-pxmu-copy-text="复制的内容">点我复制</div>
pxmu.copy({
    el: '#test' //复制id为test下的内容,
});

//或者

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

快速回到页面顶部(带动画)

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

使用方法:

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

总结

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

内容出处:,

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

发表评论

登录后才能评论