一款移动端必不可少的超级轻量级框架

大家好,我是前端实验室的小师妹！

这次给大家介绍一个移动端超级轻量级的消息提示框开源组件

Pxmu介绍

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

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

特点是轻量无依赖，整个插件只有一个 js 文件，支持常用的消息提示功能。

功能特性

• 支持常见的 toast / loading / dialog / fail 等状态提示
• 全局使用 flex 布局，自适应兼容性好
• 专为移动端设计，但 PC 和移动端都可使用
• 样式、动画、颜色、图标等都支持自定义

相比于大而全的 UI 组件库，它只解决了消息提示这个单一的功能，api 也很简单，官网所有的文档和代码例子都很简短，没有什么难度。

安装使用

目前 Pxmu.js 提供了引入 cdn 的方式使用，和npm 安装引入方式

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改变样式
});

官网：https://oct.cn/project/pxmu//?from=thosefree.com

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。