支付宝小程序浮层组件 对话框·Modal
当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用对话框。用户需要针对对话框进行操作后方可结束。扫码体验
示例代码
{
"defaultTitle": "Modal",
"usingComponents": {
"modal": "mini-ali-ui/es/modal/index"
}
}
<view>
<button onTap="openModal">打开modal</button>
<modal
show="{{modalOpened}}"
onModalClick="onModalClick"
onModalClose="onModalClose"
topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
>
<view slot="header">标题单行</view>
说明当前状态、提示用户解决方案，最好不要超过两行。
<view slot="footer">确定</view>
</modal>
</view>
Page({
data: {
modalOpened: false,
},
openModal() {
this.setData({
modalOpened: true,
});
},
onModalClick() {
this.setData({
modalOpened: false,
});
},
onModalClose() {
this.setData({
modalOpened: false,
});
}
});属性
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| className | String | - | 自定义 class。 | - |
| show | Boolean | false | 是否展示 modal。可选值：true、false。 | - |
| showClose | Boolean | false | 是否渲染 关闭。可选值：true、false。 | - |
| mask | Boolean | true | 是否展示蒙层。可选值：true、false。 | - |
| closeType | String | 0 | 关闭图表类型。可选值：0-灰色图标；1-白色图标。 | - |
| onModalClick | EventHandle | () => void | 选择区间时的回调。 | - |
| onModalClose | EventHandle | () => void | 点击 关闭 的回调, showClose 为 false 时无需设置。 | - |
| topImage | String | - | 顶部图片。 | - |
| topImageSize | String | md | 顶部图片规则.可选值：lg (带图弹框-大图)md (带图弹框)sm(带图弹框-小图) | - |
| buttons | Array<Object> | md | 底部自定义多按钮, 详情见 buttons 配置。 | - |
| onButtonClick | EventHandle | (e: Object) => void | 点击 buttons 部分的回调。 | - |
| buttonsLayout | String | horizontal | 设置 buttons 的对齐方式。可选值：horizontal，vertical。 | - |
| advice | Boolean | false | 是否是运营类弹窗。可选值：true、false。 | - |
| zIndex | String/Number | - | 设置弹框层级。 | - |
| disableScroll | Boolean | false | modal 展示时是否禁止页面滚动（以真机效果为准）。可选值：true、false。 | - |
| onMaskClick | EventHandle | () => void | 点击遮罩层时的回调 | 1.1.2 |
buttons
提供按钮组配置，每一项表示一个按钮。
| 属性 | 类型 | 描述 |
|---|---|---|
| text | String | 按钮的文本。 |
| extClass | String | 按钮自定义 Class，可用户定制按钮样式。 |
slots
| slotName | 描述 | 必填 |
|---|---|---|
| header | modal 头部。 | false |
| footer | modal 尾部。 | false |