Modal

2022-07-29 06:32

Dialog box.

Attribute Name	Description	Type	Default
className	Custom class	String
show	Show `modal` or not	Boolean	false
showClose	`Turn off` render or not	Boolean	true
closeType	Close chart type 0: gray icon 1: white icon	String	0
onModalClick	Callback on clicking `footer`	() => void
onModalClose	Callback on clicking `close`, not required when `showClose` is false	() => void
topImage	Top image	String
topImageSize	Top image rule, options including `lg`, `md` and `sm`	String	md
advice	Is operation popup or not	Boolean	false

Slots

slotName	Description
header	Optional, modal header
footer	Optional, modal footer

Example

copy

{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "modal": "mini-antui/es/modal/index"
  }
}

copy

<view>
  <button onTap="openModal">Show Modal</button>
  <modal
    show="{{modalOpened}}"
    onModalClick="onModalClick"
    onModalClose="onModalClose"
    topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
  >
    <view slot="header">Title</view>
    Explain the current status, prompt the user solution, preferably no more than two lines
    <view slot="footer">Confirm</view>
  </modal>
</view>

copy

Page({
  data: {
    modalOpened: false,
  },
  openModal() {
    this.setData({
      modalOpened: true,
    });
  },
  onModalClick() {
    this.setData({
      modalOpened: false,
    });
  },
  onModalClose() {
    this.setData({
      modalOpened: false,
    });
  }
});