Modal

2021-07-21 11:23

Dialog box.

Property	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://img.example.com/example.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,
    });
  }
});