< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
专有云（线下）
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
解决方案
会员服务
更多

    对话框（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 顶部图片规则，可选值：lg、md、sm 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. });
    上一篇：筛选（Filter）
    下一篇：弹出菜单（Popup）
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。