Modal 微信小程序对话框组件
install
npm i modal-upgrade
npm init -y
详情->本地设置->开启es6转es5、增强编译
Describe
此组件仅适用于微信小程序,其功能为弹出框,可自定义内容支持html内容嵌入,并可以作为弹出层,自动消失,与手动关闭弹框,带有数据携带的能力,可检测显示回调与点击确定与取消回调,以及自定义标题内容与底部,并支持异步提交。
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 组件唯一标识,用于获取当前组件 | String | - |
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 对话框标题,使用custom自定义模式,则title无效 | String | - |
content | 对话框内容,使用custom自定义模式,则content无效 | String | - |
confirmColor | 确定按钮颜色 | String | #FFF |
cancelColor | 取消按钮颜色 | String | #999999 |
submitBackground | 确定按钮背景颜色 | String | linear-gradient(300deg,rgba(81,166,255,1) 0%,rgba(167,218,255,1) 100%) |
cancelBackground | 取消按钮背景颜色 | String | #FFF |
showCancel | 是否显示取消按钮 | Boolean | true |
data | 对话框传入参数,扩展参数 | Number | String | Object | Boolean | Array | - |
showFooter | 显示底部 | Boolean | true |
showSubmit | 是否显示确定按钮 | Boolean | true |
backgroundColor | 对话框背景颜色 | String | #FFF |
file | 启动全屏模式 | Boolean | false |
type | 内容类型 text | array | custom | conterHtml; text为纯文本显示内容; array为列显示状态,详细使用见下方案例<启用type为array类型模式>; custom为自定义模式采用slot插槽自定义;conterHtml启动内容html自定义专区; |
String | text |
textCenter | 内容对齐方式 | String | center |
timer | 自动消失时间 | String | - |
cancelText | 取消按钮文字 | String | 取消 |
submitText | 确定按钮文字 | String | 确定 |
conterHtml | 自定义html内容专区 | Html | - |
shade | 开启遮罩层 | Boolean | true |
zIndex | 弹框显示层级 | String | 1102 |
asyncEsl | 开启异步加载确定按钮变成loading; 详细使用见下方案例<启用异步模式>; success函数中的loadingSync用来异步关闭弹窗。 |
Boolean | false |
loadingColor | 异步加载loading颜色 | String | white |
loadingSize | 异步加载loading大小 | String | Number | 40 |
btnHeight | 按钮高度 | String | Number | 88 |
名称 | 说明 |
---|---|
- | 插入组件标签内部,进行自定义内容区域 |
方法名 | 说明 | 参数 |
---|---|---|
showSuccess | 对话框展示时的回调函数 | params(Object): 说明:Object为props内的data数据 |
success | 对话框点击取消或确认回调函数 | params(Object): confirm:点击了确定按钮 cancel:点击了取消按钮 data:props内的data扩展数据 |
hidden | 对话框隐藏 | - |
watch | 对传入的data扩展参数进行监听,可监听设置data事件 | parms(Object) target:当前设置的属性 key:当前修改的key值 value:新设置的值 |
Modal step
- 在app.json或page.json中注册组件
{
"usingComponents": {
"view-modal-upgrade": "/miniprogram_npm/modal-upgrade/index"
}
}
- page页面使用组件
<view-modal-upgrade id='review'></view-modal-upgrade>
- Js中创建组件实例
let model = this.selectComponent('#review');
- 使用对话框
model.showModel({
title:"使用案例1",
content:"此内容为使用案例",
confirmColor:'white',
cancelColor:'black',
showCancel:true,
data:{
name:"name",
age:"age",
text:"text"
},
showFooter:true,
showSubmit:true,
file:false,
type:"text",
textCenter:"center",
timer:"60",
showSuccess:function(data){
console.log(data)
},
watch:function(target,key,value){
console.log(target,key,value)
},
success:function(data){
if(data.confirm){
console.log(data)
}else{
console.log(data)
}
}
})
Modal special {#1}
- 启用slot插槽,启用自定义模式
model.showModel({
type:'custom',
showFooter:false,
data:{
data1:"data1",
data2:"data2"
},
showSuccess:function(data){
console.log(data)
},
success:function(data){
console.log(data)
}
})
<view-modal-upgrade id='review'>
<view> 自定义内容 </view>
</view-modal-upgrade>
- 启用内容html自定义专区
model.showModel({
type:'conterHtml',
conterHtml:"<p>启动html自定义专区</p>",
showFooter:false,
data:{
data1:"data1",
data2:"data2"
},
showSuccess:function(data){
console.log(data)
},
success:function(data){
console.log(data)
}
})
- 启用异步模式
model.showModel({
title:"使用异步loading加载模式",
content:"使用异步loading加载内容",
asyncEsl:true,
loadingColor:"white",
loadingSize:"40",
showSuccess:function(data){
// console.log(data)
},
success:function(data){
if(data.confirm){
setTimeout(() => {
//接口请求成功请设置loadingSync为true
data.loadingSync = true
}, 3000);
}else{
console.log(data)
}
}
})
- 启用type为array类型模式
model.showModel({
title:"Array内容模式",
content:[{name:"左侧1",value:"右侧1"},{name:"左侧2",value:"右侧2"}],
type:"array",
showSuccess:function(data){
// console.log(data)
},
success:function(data){
// console.log(data)
}
})
- 手动调用方法
//手动调用模态框隐藏函数
model.hidden()
//手动调用 确定按钮事件
model.yes()
//手动调用 取消按钮事件
model.no()