对话框。
| 属性名 | 描述 | 类型 | 默认值 |
| 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尾部 |
1 2 3 4 5 6 | { "defaultTitle": "应用AntUI组件库", "usingComponents": { "modal": "mini-antui/es/modal/index" }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <view> <button onTap="openModal">打开modal</button> <modal show="{{modalOpened}}" onModalClick="onModalClick" onModalClose="onModalClose" > <view slot="header">标题单行</view> 说明当前状态、提示用户解决方案，最好不要超过两行。 <view slot="footer">确定</view> </modal></view> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | Page({ data: { modalOpened: false, }, openModal() { this.setData({ modalOpened: true, }); }, onModalClick() { this.setData({ modalOpened: false, }); }, onModalClose() { this.setData({ modalOpened: false, }); }}); |
