对话框（Modal） - 移动开发平台 mPaaS

本文介绍对话框（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

slots

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,
    });
  }
});