大家好,我是前端实验室的小师妹！
这次给大家介绍一个移动端超级轻量级的消息提示框开源组件
Pxmu介绍
Pxmu 是移动端超轻量的消息提示框插件
无需任何依赖,即可运行。由十月（Oct.cn）开发维护，全局使用flex布局，自适应兼容性强。PC和移动端都可使用,样式精美,可自定义动画/颜色/字体等
特点是轻量无依赖，整个插件只有一个 js 文件，支持常用的消息提示功能。
功能特性
- 支持常见的 toast / loading / dialog / fail 等状态提示
- 全局使用 flex 布局，自适应兼容性好
- 专为移动端设计，但 PC 和移动端都可使用
- 样式、动画、颜色、图标等都支持自定义
相比于大而全的 UI 组件库，它只解决了消息提示这个单一的功能，api 也很简单，官网所有的文档和代码例子都很简短，没有什么难度。
安装使用
目前 Pxmu.js 提供了引入 cdn 的方式使用，和npm 安装引入方式
cdn引入
使用 Pxmu 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 pxmu 访问到支持的方法。
代码语言：javascript复制//始终引入最新
<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 访问到支持的方法。
代码语言：javascript复制npm i pxmu
以Toast为例
使用 pxmu.toast() 方法提示信息，提示框会自动消失。可以自定义弹出时间、位置、背景色、字体颜色
直接使用
代码语言：javascript复制pxmu.toast('提示内容');
自定义配置
代码语言：javascript复制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 ，按提示操作即可进群。
