Modal 对话框

对话框。

扫码体验：
Modal 对话框 - 图1

属性名描述类型默认值
className自定义classString
show是否展示modalBooleanfalse
showClose是否渲染关闭Booleantrue
closeType关闭图表类型 0：灰色图标 1：白色图标String0
onModalClick点击footer部分的回调() => void
onModalClose点击关闭的回调, showClose为false时无需设置() => void
topImage顶部图片String
topImageSize顶部图片规则，可选值：lg、md、smStringmd
advice是否是运营类弹窗Booleanfalse

slots

slotName说明
header可选，modal头部
footer可选，modal尾部

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "modal": "mini-antui/es/modal/index"
  5.   }
  6. }
  1. <view>
  2.   <button onTap="openModal">打开modal</button>
  3.   <modal
  4.     show="{{modalOpened}}"
  5.     onModalClick="onModalClick"
  6.     onModalClose="onModalClose"
  7.     topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
  8.   >
  9.     <view slot="header">标题单行</view>
  10.     说明当前状态、提示用户解决方案，最好不要超过两行。
  11.     <view slot="footer">确定</view>
  12.   </modal>
  13. </view>
  1. Page({
  2.   data: {
  3.     modalOpened: false,
  4.   },
  5.   openModal() {
  6.     this.setData({
  7.       modalOpened: true,
  8.     });
  9.   },
  10.   onModalClick() {
  11.     this.setData({
  12.       modalOpened: false,
  13.     });
  14.   },
  15.   onModalClose() {
  16.     this.setData({
  17.       modalOpened2: false,
  18.     });
  19.   }
  20. });

原文: https://docs.alipay.com/mini/component-ext/modal