全部产品

对话框(modal)

本文介绍对话框(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 顶部图片规则,可选值:lgmdsm 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. });