更新时间:2019-09-09 14:07
本文介绍对话框(Modal)。
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
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,
});
}
});
在文档使用中是否遇到以下问题
更多建议
匿名提交