antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
65 lines (55 loc) • 4.25 kB
Markdown
nav:
path: /components
group:
title: 待废弃
order: 99
toc: 'content'
# Modal 弹窗
不建议使用，此组件即将废弃。推荐使用 [Dialog](/components/dialog) 组件，拥有最新设计规范。
## 引入
在 `index.json` 中引入组件
```json
"usingComponents": {
#if ALIPAY
"ant-modal": "antd-mini/es/Modal/index"
#endif
#if WECHAT
"ant-modal": "antd-mini/Modal/index"
#endif
}
```
### Demo 代码
<code src='../../demo/pages/Modal/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| ---------------------------------- | ------------------------------------------------- | ------------ | --------- |
| bodyClassName | body 类名 | string | - |
| bodyStyle | body 样式 | string | - |
| cancelButtonStyle | 取消按钮样式 | string | - |
| cancelButtonText | 取消按钮文本 | string | - |
| className | 类名 | string | - |
| closable | 是否显示右上角的关闭按钮。仅在 type 为 focus 生效 | boolean | - |
| content | 内容 | string\|slot | - |
| destroyOnClose | 不可见时是否卸载内容 | boolean | false |
| footer | 自定义按钮区 | slot | - |
| maskClosable | 点击蒙层是否触发 onClose | boolean | true |
| maskClassName | 蒙层的类名 | string | - |
| maskStyle | 蒙层的样式 | string | - |
| primaryButtonStyle | 主按钮样式 | string | - |
| primaryButtonText | 主按钮文本 | string | - |
| secondaryButtonStyle | 辅助按钮样式 | string | - |
| secondaryButtonText | 辅助按钮文本 | string | - |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
| type | 类型，可选 `default`(默认)、`focus`(强调模式) | string | `default` |
| visible | 是否显示 | boolean | false |
| #if ALIPAY onCancelButtonTap | 取消按钮点击事件 | ()=>void | - |
| #if ALIPAY onClose | 点击蒙层或强调模式下点击右上角关闭按钮，触发回调 | ()=>void | - |
| #if ALIPAY onPrimaryButtonTap | 主按钮点击事件 | ()=>void | - |
| #if ALIPAY onSecondaryButtonTap | 辅助按钮点击事件 | ()=>void | - |
| #if WECHAT bindcancelbuttontap | 取消按钮点击事件 | ()=>void | - |
| #if WECHAT bindclose | 点击蒙层或强调模式下点击右上角关闭按钮，触发回调 | ()=>void | - |
| #if WECHAT bindprimarybuttontap | 主按钮点击事件 | ()=>void | - |
| #if WECHAT bindsecondarybuttontap | 辅助按钮点击事件 | ()=>void | - |