mobile-message
mobile-message是一个基于移动端的弹窗组件,默认提供info、success、warning、error、alert、confirm、multiple、vertical、bottomSheet、prompt,可自定义弹窗。它可以包含任何Html内容可以自定义弹窗的样式,也可以加入自定以的弹窗动画。
网上关于弹窗的组件也很多,就算是自己写代码也很少很简单。但mobile-message有一下3个不同的特点。
- 弹窗是单例模式,就是只有一个实例。这体现在当多个弹窗展示时只会显示最后一个弹窗的内容,比如:当前正在展示的是弹窗A,代码又调用了弹窗B,这个时候就会把弹窗A的内容变成弹窗B的内容,记住是变成而不是常规的先把弹窗A关掉然后再显示弹窗B。
- 一套简单的代码兼容10种弹窗模式,只是因为样式不一样,代码轻量,方便维护,容易扩展,可根据自己的业务需要自定义。
- 让弹窗弹层背后整个页面禁止滚动,而弹层自己的内容是可滚动的。这是最麻烦的处理,但看网上大多数都没做处理或者处理的不够完美。
运行项目
clone项目到本地,进入项目文件夹,安装依赖
git clone https://github.com/yujinjin/mobile-message.gitcd mobile-messagenpm install
运行demo,会自动打开浏览器地址运行
npm run demo
编译打包项目
npm run compile
NPM
npm install mobile-message
依赖
- VUE
使用
作为插件
// VUE useVue;// or with optionsVue;
作为JS 对象
let message = MobileMessage;;message;...
配置选项
名称 | 描述 | 默认值 | 可选项 |
---|---|---|---|
initCallback |
是否显示去顶部图标初始化后的弹窗的回调函数(会传入当前弹窗的$body参数) | null | Function |
isShowMask |
是否显示弹层的遮罩层 | false | Boolean |
icon |
内容消息的icon,默认提供:message-icon-info,message-icon-success,message-icon-warning,message-icon-error |
|
String |
delay |
窗口多少毫秒后自动关闭,为0时,不自动关闭 | 0 | Number |
autoHide |
点击遮罩层是否自动隐藏 | true | Boolean |
className |
弹层的样式名称,这个是定义在弹窗的'message-dialog'样式上 | null | String |
contents |
弹窗的内容(支持HTML),如果为null或者''就不会展示 | null | String |
title |
弹窗的头部标题,如果为null或者''就不会展示头部 | null | String |
height |
弹层高度(默认'inherit') | inherit | String |
buttons |
弹层的底部按钮列表[{className,label,callback}],如果为null或者数组长度为0就不会展示 | [] | Array |
scrollerData |
scroller事件对象数据,如果是false或null表示不绑定事件 | {selectorScrollable: null} |
Object |
API
1. 默认
默认消息弹窗,默认只传入消息的内容一个参数即可、2秒之后自动隐藏、没有遮罩层、点击其他会自动关闭弹窗,如需调整自动隐藏时间需加入delay的配置选项。
this// or other use// this.$message.info("messages", callBackFun, {delay: 3000,...}); callBackFun: 可选,表示弹窗关闭时的回调函数,options:弹窗的配置选项// or other use// this.$message({// type: "info",// contents: "messages"// });
示例:
this;
2. 成功
成功消息弹窗,默认只传入消息的内容一个参数即可、2秒之后自动隐藏、没有遮罩层、点击其他会自动关闭弹窗,如需调整自动隐藏时间需加入delay的配置选项。
this$message; // callBackFun: 可选,表示弹窗关闭时的回调函数,options:弹窗的配置选项// or other use// this.$message({// type: "success",// contents: "messages"// });
示例:
this$message;
3. 警告
警告消息弹窗,默认只传入消息的内容一个参数、2秒之后自动隐藏、没有遮罩层、点击其他会自动关闭弹窗,如需调整自动隐藏时间需加入delay的配置选项。
this$message; // callBackFun: 可选,表示弹窗关闭时的回调函数,options:弹窗的配置选项// or other use// this.$message({// type: "warning",// contents: "messages"// });
示例:
this$message;
4. 错误
错误消息弹窗,默认只传入消息的内容一个参数即可、30秒之后自动隐藏、有遮罩层、点击其他会自动关闭弹窗,如需调整自动隐藏时间需加入delay的配置选项。
this$message; // callBackFun: 可选,表示弹窗关闭时的回调函数,options:弹窗的配置选项// or other use// this.$message({// type: "error",// contents: "messages"// });
示例:
this$message;
5. 提示
提示消息弹窗,默认只传入消息的内容一个参数即可、有遮罩层、点击其他是不会会自动关闭弹窗。
this$message; // callBackFun: 可选,表示点击弹窗底部按钮时的回调函数,title:可选,弹窗的标题,默认值是'提示',label:可选,底部按钮文案
示例:
this$message;
6. 确认
确认消息弹窗,默认只传入消息的内容一个参数即可、有遮罩层、点击其他是不会会自动关闭弹窗、底部2个按钮‘取消’和‘确定’。callBackFun回调函数有result和$body2个参数,result是boolean值,表示点击的取消(false)、确定(true)
this$message; // callBackFun: 可选,表示点击弹窗底部按钮时的回调函数,buttons:弹窗底部的按钮列表,默认是[{className: "cancel", label: "取消", callback: null}, {className: "ok", label: "确认", callback: null}],title:可选,弹窗的标题,默认值是'提示'
示例:
this$message;
7. 多个按钮并排
消息弹窗底部多个按钮并排
this$messagemultiplecontents buttons title options; // contents: 消息的内容,buttons:底部按钮列表,title:可选,弹窗的标题,options:可选,弹窗配置选项
示例:
this$messagemultiple"我认识的一个女生嫁去日本了,以为再也见不到她了,直到有一天我下载了一个种子" label: "现在升级" { console; // 如果返回值是false就不自动关闭弹窗 return false; } label: "下次再说" { console; } label: "不再提醒" { console; };
8. 多个按钮竖排
消息弹窗底部多个按钮竖排
this$message; // contents: 消息的内容,buttons:底部按钮列表,title:可选,弹窗的标题,options:可选,弹窗配置选项
示例:
this$message;
9. 多个按钮底部
消息弹窗靠近底部展示
this$message; // contents: 消息的内容,buttons:底部按钮列表,options:可选,弹窗配置选项
示例:
this$message;
10. 输入内容确认
消息弹窗输入内容确认
this$messageprompttitle callBackFun labels options; // title: 弹窗的头部标题,callBackFun:底部按钮点击后的回调函数,有result、value、$body3个参数,result是boolean值表示点击的取消(false)、确定(true),value表示输入的实际值。options:可选,弹窗配置选项
示例:
this$messageprompt"请输入您的姓名" { console;};
11. 自定义
自定义弹窗,本示例加入了动画以及滚动,具体看demo
this; // options:弹窗配置选项
示例:
this;
弹窗dom结构
为了了解弹窗dom结构,这里把弹窗的源码贴出来,方便样式定义。
{{buttonItem.label}}
最后
-
如果喜欢一定要 star哈!!!(谢谢!!)
-
如果有意见和问题 请在 lssues提出,我会在线解答。