全部产品

对话框(Modal)

更新时间:2019-09-09 14:07:26

本文介绍对话框(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 顶部图片规则,可选值:lgmdsm String md
advice 是否是运营类弹窗 Boolean false

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. modalOpened: false,
  18. });
  19. }
  20. });