Pxmu.js

移动端轻量消息提示框插件

介绍

Pxmu 是移动端超轻量的消息提示框插件

无需任何依赖,即可运行。由十月(Oct.cn)开发维护,全局使用flex布局,自适应兼容性强。PC和移动端都可使用。样式精美,可自定义动画/颜色/字体等

有常用的 toast diaglogsuccess loading copy

通过 CDN 引入

使用 Pxmu 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量 pxmu 访问到支持的方法。

始终引入最新

<script type="text/javascript" src="https://unpkg.com/pxmu/dist/web/pxmu.min.js"></script>

引入指定版本

<script type="text/javascript" src="https://unpkg.com/pxmu@1.1.0/dist/web/pxmu.min.js"></script>

通过 npm 安装

npm直接安装引入,之后你可以通过全局变量 pxmu 访问到支持的方法。

npm i pxmu

Toast

介绍

使用 pxmu.toast() 方法提示信息,提示框会自动消失。可以自定义弹出时间、位置、背景色、字体颜色

直接使用

pxmu.toast('提示内容');

自定义配置

pxmu.toast({
    msg: '操作成功', //内容 不能为空
    time: 2500, //停留时间 默认2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
    color: '#fff', //文字颜色 默认白色
    location: '',//居中center 顶部top 底部bottom默认
    animation: 'slidedown', //显示的动画 默认fade 动画支持详见动画文档
    type: 'wap', //默认wap样式 可选参数:pc 入参pc时
    status: '', //可选参数 success成功 warn警告 error错误 仅在type=pc时候生效,wap时可通过自定义bg、color改变样式
});

Diaglog

介绍

使用 pxmu.diaglog() 方法弹出消息选择框或通知框.可以自定义一个按钮或2个按钮.以及超高的自定义入参.可点击左侧demo体验.

直接使用,无需回调

pxmu.diaglog('提示内容');

自定义配置

pxmu.diaglog({
    congif: {
        animation: 'slidedeg', //自定义动画 动画名详见动画文档
    }
}).then(function(res) {
    if (res.btn == 'right') {
        //点击了右侧按钮
    } else {
        //点击了左侧按钮
    }
});

参数文档

pxmu.diaglog({
    title: {
        text: '温馨提示', //标题文本
        color: '#000', //标题颜色
        fontsize: 20, //字体大小
        fontweight: 'bold', //是否加粗 bold加粗 normal不加粗
        center: false //true为居中显示 false为不居中显示
    },
    content: {
        text: '', //文本内容 为空时不显示
        color: '#444', //文本颜色
        fontsize: 14, //文本字体大小
        fontweight: 'normal', //是否加粗 bold加粗 normal不加粗
    },
    line: {
        solid: 0, //线条的粗细度 0位不显示 数值越大线条越粗
        color: '#eee', //线条颜色
    },
    btn: {
        left: {
            text: '取消', //左侧按钮文本内容
            color: '#f50', //左侧按钮颜色
            fontsize: 16, //左侧按钮字体大小
            fontweight: 'bold', //左侧按钮是否加粗 bold加粗 normal不加粗
            bg: '#fff', //左侧按钮背景色
            solid: 1, //左侧按钮描边粗细
            solidcolor: '#f50', //左侧按钮描边颜色
        },
        right: {
            text: '确定', //右侧按钮文本内容
            color: '#fff', //右侧按钮文本颜色
            fontsize: 16, //右侧按钮文本大小
            fontweight: 'bold', //右侧按钮是否加粗 bold加粗 normal不加粗
            bg: '#f50', //右侧按钮字体颜色
            solid: 1, //右侧按钮描边
            solidcolor: '#f50', //右侧按钮描边颜色
        }
    },
    congif: {
        cbclose: false, //true时开启异步关闭 点击确认不自动关闭 默认false
        cbcloseall: false, //true时开启异步关闭 点击任何地方都不可关闭
        cbload: true, //异步开启时 是否显示loading转圈效果
        cbloadcolor: '#fff', //loading转圈颜色
        cbloadtext : '',//loading时文案 为空不显示
        bg: 'rgba(0,0,0,0.65)', //当前消息框的背景色
        inscroll: true, //弹出时页面不可滚动 true不可滚动 false可滚动
        inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
        anclose: true, //点击背景可关闭
        animation: 'none', //显示的动画 默认无动画 动画支持详见动画文档
        btnstyle: false, //true时为圆角样式 默认false
        btncount: false, //true时显示一个按钮 默认true 2个按钮
    }
}).then(function(res) {
    // 返回结构
    res = {
        type: 'click',
        btn: 'right', //left 点击了左侧按钮 right点击了右侧按钮
    }
});

手动关闭Diaglog

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

Loading

介绍

使用 pxmu.loading() 方法,会有一个动画等待框,一般用于业务没有得到响应之前.提示框会自动消失或手动关闭。可以自定义停留时间,是否自动关闭,是否等待期间不可点击,msg为空时仅显示图形

直接使用,3秒后自动关闭

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)',//自定义遮罩层颜色 为空不显示遮罩层
});

手动关闭loading

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

Success

介绍

使用 pxmu.success() 方法,可以实现事件成功的消息提醒,如登录完成/收藏成功等. 提示框会自动消失。可以自定义停留时间,是否自动关闭,是否不可交互,msg为空时仅显示图形

直接使用,3秒后自动关闭

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)',//自定义遮罩层颜色 为空不显示遮罩层
});

手动关闭success

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

Fail

介绍

使用 pxmu.fail() 方法,可以实现事件失败的消息提醒,如登录失败/网络超时/收藏失败等. 提示框会自动消失。可以自定义停留时间,是否自动关闭,是否不可交互,text为空时仅显示图形

直接使用,3秒后自动关闭

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)',//自定义遮罩层颜色 为空不显示遮罩层
});

手动关闭fail

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

Copy

介绍

使用 pxmu.copy() 方法快速复制一段文本,或复制指定dom下的文本内容

直接使用

pxmu.copy('我将被复制');

dom声明复制

<div data-pxmu-copy-text="点击该元素时,我将被复制">click Me</div>

函数自定义复制

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

Totop

介绍

使用 pxmu.totop() 方法快速回到顶部

直接使用

pxmu.totop();

动画文档

介绍

查看左侧支持的动画方法

更新记录log

更新日志地址

https://oct.cn/view/56

全局参数

全局参数(可选)

是否重叠消息弹出层,默认不重叠,即弹出新消息则覆盖旧消息。默认true,如果不改变则无需声明该参数。如需调用。在一个页面声明一次即可。

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

Pxmu.js

移动端轻量消息提示框插件

支持的方法
{{item.title ? item.title : item.name}}