移动端弹框组件mDialog

2018-10-26 散崖 12117人已阅读

移动端的通用弹框插件,像layer mobile,sweetAlert独立的插件有很多,而且是原生的(牛逼),然后平时写页面的时候,一般小专题基于jquery或者zepto来开发,有些事基于vue。通常基于flexible实现了rem自适应。平时h5页面专题一大堆,工欲善其事必先利其器!

狠狠点击这里查看demo     可以手机扫码查看效果更佳

 01

github地址:https://github.com/efri-yang/mdialog.git

一、明显的弹框组件满足以下几点

1、适配flexible的rem自适应布局

2、深度接入animate.css(只要是animate.css的动画,只要传入名字就可以实现弹框进场和出场动画,而无需人工书写,一步到位)

3、弹框的多类型(loading,confirm,msg等等)

4、宽高自适应宽高

 

 

二、options参数

参数 描述 默认值
title 弹框标题 ''
pause 弹框显示的时间(load,msg等提示框需显示时间) 2000
duration 执行animation的时间 250
shade 是否显示遮罩层 true或{opacity: 0.8,bgColor: "#f60"}对象类型
width 弹框宽度(可以是"500px"或“80%“或“auto”,像素、百分比、自适应都可以) auto(自适应)
height 弹框高度(可以是"500px"或“80%“或“auto”,像素、百分比、自适应都可以) auto(自适应)
maxWidth 弹框最大宽度(自适应或者是定义width不能大于maxWidth,大于maxWidth取值maxWidth) "85%"
maxHeight 弹框最大高度(自适应或者是定义height不能大于maxHeight,大于maxHeight取值maxHeight) "80%"
animIn 进场动画(animate.css的任何动画也可以) “mDialogZoomIn”
animOut 出场动画(animate.css的任何动画也可以) “mDialogZoomOut”
shadeClose 点击遮罩层会不会触发关闭弹框 true
closeBtn 是否显示关闭按钮 true
buttons 弹框底部按钮 false
content 弹框的内容 是一个容器element,一个文本文字
offset 弹框的显示位置 [“auto”, “auto”]
hasInput 是否有表单输入(ios fixed的时候input出键盘后,输入框位置漂移了兼容方案) false
onBeforeShow 弹框显示前触发函数 function
onShow 弹框显示后触发函数 function
onBeforeClose 弹框关闭前触发函数 function
onClose 弹框关闭后触发函数 function

 

二、弹框内置对象方法

方法名称 描述  
mDialog.open() 捕获页面元素的调用形式 demo
mDialog.confirm() 询问框调用方法 demo
mDialog.msg() 提示框调用方法 demo
mDialog.close() 关闭特定的弹框(mDialog.close(dialog1)) demo
mDialog.closeAll() 关闭所有的弹框  

 

交换友情链接