个人随笔
目录
发现一个宝藏js弹窗插件,使用超级简单方便
2022-03-22 16:09:52

介绍

Pxmu 是移动端超轻量的消息提示框插件
无需任何依赖,即可运行。由十月(Oct.cn)开发维护,全局使用flex布局,自适应兼容性强。PC和移动端都可使用。样式精美,可自定义动画/颜色/字体等
有常用的 toast diaglogsuccess loading copy 等

官网

https://oct.cn/project/pxmu/

简单使用

官网已经说的很详细了,这里搬运下

1、js引入

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

2、使用

  1. //Toast测试
  2. //直接使用
  3. pxmu.toast('提示内容');
  4. //自定义配置
  5. pxmu.toast({
  6. msg: '操作成功', //内容 不能为空
  7. time: 2500, //停留时间 默认2500毫秒
  8. bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
  9. color: '#fff', //文字颜色 默认白色
  10. location: 'center',//居中center 顶部top 底部bottom默认
  11. animation: 'slidedown', //显示的动画 默认fade 动画支持详见动画文档
  12. type: 'wap', //默认wap样式 可选参数:pc 入参pc时
  13. status: '', //可选参数 success成功 warn警告 error错误 仅在type=pc时候生效,wap时可通过自定义bg、color改变样式
  14. });
  15. //Diaglog测试
  16. //1、直接使用
  17. pxmu.diaglog('提示内容');
  18. //2、自定义配置
  19. pxmu.diaglog({
  20. congif: {
  21. animation: 'slidedeg', //自定义动画 动画名详见动画文档
  22. }
  23. }).then(function(res) {
  24. if (res.btn == 'right') {
  25. //点击了右侧按钮
  26. } else {
  27. //点击了左侧按钮
  28. }
  29. });
  30. //Loading测试
  31. //直接使用
  32. pxmu.loading('加载中..');
  33. //自定义配置
  34. pxmu.loading({
  35. msg: '正在加载', //loading信息 为空时不显示文本
  36. time: 2500, //停留时间
  37. bg: 'rgba(0, 0, 0, 0.65)', //背景色
  38. color: '#fff', //文字颜色
  39. animation: 'fade', //动画名 详见动画文档
  40. close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
  41. inscroll: false, //模态 不可点击和滚动
  42. inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
  43. });
  44. //手动关闭
  45. pxmu.closeload(100);//延时100毫秒关闭 默认0
  46. //Success测试
  47. pxmu.success('提示内容');
  48. //自定义配置
  49. pxmu.success({
  50. msg: '收藏成功', //loading信息 为空时不显示文本
  51. time: 2500, //停留时间
  52. bg: 'rgba(0, 0, 0, 0.65)', //背景色
  53. color: '#fff', //文字颜色
  54. animation: 'fade', //动画名 详见动画文档
  55. close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
  56. inscroll: false, //模态 不可点击和滚动
  57. inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
  58. });
  59. //手动关闭
  60. pxmu.closeload(100);//延时100毫秒关闭 默认0
  61. //Fail测试
  62. //直接使用
  63. pxmu.fail('收藏失败');
  64. //自定义配置
  65. pxmu.fail({
  66. msg: '收藏失败', //loading信息 为空时不显示文本
  67. time: 2500, //停留时间
  68. bg: 'rgba(0, 0, 0, 0.65)', //背景色
  69. color: '#fff', //文字颜色
  70. animation: 'fade', //动画名 详见动画文档
  71. close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
  72. inscroll: false, //模态 不可点击和滚动
  73. inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
  74. });
  75. //手动关闭fail
  76. pxmu.closeload(100);//延时100毫秒关闭 默认0
  77. //Copy使用
  78. //直接使用
  79. pxmu.copy('我将被复制');
  80. //dom声明复制
  81. //函数自定义复制
  82. pxmu.copy({
  83. el: '#test' //复制id为test下的内容,
  84. });
  85. //或者
  86. pxmu.copy({
  87. el: '.test' //复制class为test下的内容,
  88. });
  89. //Totop
  90. //使用 pxmu.totop() 方法快速回到顶部
  91. //直接使用
  92. pxmu.totop()

很爱

 37

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号