modal-upgrade
Version:
微信小程序弹框组件，支持全屏展示与各种自定义
251 lines (198 loc) • 10.8 kB
Markdown
# **Modal 微信小程序对话框组件**
### install
```js
npm i modal-upgrade
```
```js
npm init -y
```
```js
详情->本地设置->开启es6转es5、增强编译
```
### Describe
此组件仅适用于微信小程序，其功能为弹出框，可自定义内容支持html内容嵌入，并可以作为弹出层，自动消失，与手动关闭弹框，带有数据携带的能力，可检测显示回调与点击确定与取消回调，以及自定义标题内容与底部,并支持异步提交。
### API
:label: Modal props
| 属性 | 说明 | 类型 | 默认值 |
| ---- | ------------------------------ | ------ | ------ |
| id | 组件唯一标识，用于获取当前组件 | String | - |
:label: Modal property
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | ------------------------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------------ |
| 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；<br />text为纯文本显示内容;<br />array为列显示状态，详细使用见下方案例<启用type为array类型模式>；<br />[ custom为自定义模式采用slot插槽自定义](#1)；conterHtml启动内容html自定义专区； | String | text |
| textCenter | 内容对齐方式 | String | center |
| timer | 自动消失时间 | String | - |
| cancelText | 取消按钮文字 | String | 取消 |
| submitText | 确定按钮文字 | String | 确定 |
| conterHtml | 自定义html内容专区 | Html | - |
| shade | 开启遮罩层 | Boolean | true |
| zIndex | 弹框显示层级 | String | 1102 |
| asyncEsl | 开启异步加载确定按钮变成loading;<br />详细使用见下方案例<启用异步模式>；<br />success函数中的loadingSync用来异步关闭弹窗。 | Boolean | false |
| loadingColor | 异步加载loading颜色 | String | white |
| loadingSize | 异步加载loading大小 | String \| Number | 40 |
| btnHeight | 按钮高度 | String \| Number | 88 |
:label: Modal slot
| 名称 | 说明 |
| ---- | ------------------------------------ |
| - | 插入组件标签内部，进行自定义内容区域 |
:label: Modal methods
| 方法名 | 说明 | 参数 |
| ----------- | ------------------------------------------------ | ------------------------------------------------------------ |
| showSuccess | 对话框展示时的回调函数 | params(Object):<br />说明：Object为props内的data数据 |
| success | 对话框点击取消或确认回调函数 | params(Object):<br />confirm：点击了确定按钮<br />cancel：点击了取消按钮<br />data：props内的data扩展数据 |
| hidden | 对话框隐藏 | - |
| watch | 对传入的data扩展参数进行监听，可监听设置data事件 | parms(Object)<br />target:当前设置的属性<br />key:当前修改的key值<br />value:新设置的值 |
### Modal step
- 在app.json或page.json中注册组件
```json
{
"usingComponents": {
"view-modal-upgrade": "/miniprogram_npm/modal-upgrade/index"
}
}
```
- page页面使用组件
```html
<view-modal-upgrade id='review'></view-modal-upgrade>
```
- Js中创建组件实例
```js
let model = this.selectComponent('#review');
```
- 使用对话框
```js
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插槽，启用自定义模式
```js
model.showModel({
type:'custom',
showFooter:false,
data:{
data1:"data1",
data2:"data2"
},
showSuccess:function(data){
console.log(data)
},
success:function(data){
console.log(data)
}
})
```
```html
<view-modal-upgrade id='review'>
<view> 自定义内容 </view>
</view-modal-upgrade>
```
- 启用内容html自定义专区
```js
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)
}
})
```
- 启用异步模式
```js
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类型模式
```js
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)
}
})
```
- 手动调用方法
```js
//手动调用模态框隐藏函数
model.hidden()
```
```js
//手动调用 确定按钮事件
model.yes()
```
```js
//手动调用 取消按钮事件
model.no()
```