对话框。
| 属性名 | 描述 | 类型 | 默认值 |
| className | 自定义class | String | |
| show | 是否展示modal |
Boolean | false |
| showClose | 是否渲染关闭 |
Boolean | true |
| closeType | 关闭图标类型 0：灰色图标 1：白色图标 | String | 0 |
| onModalClick | 点击footer部分的回调 |
() => void | |
| onModalClose | 点击关闭的回调, showClose为false时无需设置 |
() => void | |
| topImage | 顶部图片 | String | |
| topImageSize | 顶部图片规则，可选值：lg、md、sm |
String | md |
| advice | 是否是运营类弹窗 | Boolean | false |
| slotName | 说明 |
| header | 可选，modal头部 |
| footer | 可选，modal尾部 |
{
"defaultTitle": "应用AntUI组件库",
"usingComponents": {
"modal": "mini-antui/es/modal/index"
}
}
<view>
<button onTap="openModal">打开modal</button>
<modal
show="{{modalOpened}}"
onModalClick="onModalClick"
onModalClose="onModalClose"
topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
>
<view slot="header">标题单行</view>
说明当前状态、提示用户解决方案，最好不要超过两行。
<view slot="footer">确定</view>
</modal>
</view>
Page({
data: {
modalOpened: false,
},
openModal() {
this.setData({
modalOpened: true,
});
},
onModalClick() {
this.setData({
modalOpened: false,
});
},
onModalClose() {
this.setData({
modalOpened: false,
});
}
});
