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

本文介绍对话框（modal）。

属性名	类型	描述	默认值
className	String	自定义 class。	-
show	Boolean	是否展示 modal。	false
showClose	Boolean	是否渲染“关闭”。	true
closeType	String	关闭图表类型。 0：灰色图标 1：白色图标	0
onModalClick	() => void	点击 footer 部分的回调。	-
onModalClose	() => void	点击“关闭”的回调，`showClose` 为 false 时无需设置。	-
topImage	String	顶部图片。	-
topImageSize	String	顶部图片规则，可选值：`lg`、`md`、`sm`。	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,
    });
  }
});