free-mask-dialog v1.0.5
It is a free dialog with full screen mask
How use ?
const maskDialog = require('free-mask-dialog');
let mask = new maskDialog({
title:'This is title',
content:'This is content',
})
API function
show ()
show the dialog
eq:mask.show()
hide ()
hide the dialog
eq:mask.hide()
showBefore(cb)
call the cb function before show the dialog
hideAfter(cb)
call the cb function after hide the dialog
other option
closeBtnEle String
| Array
you can add the classname to emit close action
bg Boolean
you can control the mask-bg show or hide
title String
set the title for the dialog
content String
set the content for the dialog
z-index Number
set the class of the z-index for the dialog. when you setted the param —— z-index with the dialog will change the mask-bg's z-index
width Number
|String
set the dialog width support the percentage
height Number
|String
set the dialog height support the percentage
closeBtn Boolean
set the closeBtn show or hide
closeBtnEle String
control and add the element's class with this parameter in the close button
scroll Boolean
set the webpack cann't scroll. The defaults value is true
canClose Boolean
if the value is true will emit dialog hide function when click the mask-bg
style String
add the className for the mask_dialog_main. you can use it do anything. such as change the class with the dialog. the default value is default
autoInitContent Boolean
auto refresh the dialog setting before emit show function.The default value is true. If the param value is false will jump over the render function
btn Array
just only support Array
- content : the btn text
- url : the btn link
- cb : the btn click function
- target : open link method
such as:
let mask = new maskDialog({
title: "This is title",
content: "This is content",
btn: [
{
content: "btn 1",
cb: () => {
alert(2);
}
},
{
content: "btn 2",
target: "_blank",
url: "https://www.google.com"
}
]
});
中文文档
let mask = new maskDialog({
'closeBtnEle':'.mask_dialog_close' //默认.mask_dialog_close [optional]
'bg': Boolean //[optional]
'title':String
'content':String
'z-index': Number //层级(number),设置的是 bg 的层级,联动会设置弹窗 [optional]
'width': 200, //宽度:可传递各种单位,默认 100%
'height': 300, //高度:可传递各种单位
'closeBtn':Boolean, //关闭按钮,false 不显示 [optional]
'scroll': Boolean //页面滚动:false 为不可滚动,默认为 true 可滚动 [optional]
'canClose':Boolean //点击关闭:false 为不可以点击关闭,默认为 true 可点击关闭 [optional]
'style': String //'类名,控制修改 class=mask_dialog_main 的 同级类,默认是 default,可以由此来控制对话框样式', [optional]
'autoInitContent':false, //每次 show 都会重新,默认为 true,不启动传 false [optional]
});
mask.show(); // 显示提示框,传显示内容,一般为 STRING——DOM
mask.hide(); // 隐藏提示框
mask.showBefore(){}; //显示回调
mask.hideAfter(){}; //隐藏回调