对话框（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,
        });
      }
    });