63 lines
3.8 KiB
Markdown
63 lines
3.8 KiB
Markdown
# Modal
|
||
|
||
## 控件功能，类型（普通控件或容器控件），父类控件
|
||
- **控件功能**：`Modal` 是一个模态对话框控件，用于在页面上显示一个居中的浮动面板，通常用于展示内容、表单或提示信息。支持点击背景关闭、自动打开/关闭、定时关闭等功能。
|
||
- **类型**：容器控件（可容纳其他子控件）
|
||
- **父类控件**：`bricks.BaseModal`
|
||
|
||
### 初始化参数
|
||
| 参数名 | 类型 | 说明 |
|
||
|------------|------------|------|
|
||
| `target` | string 或 Layout | 指定模态框挂载的目标容器，默认为 `bricks.Body`（即 body） |
|
||
| `auto_open` | boolean | 是否在创建后自动调用 `open()` 方法显示模态框，默认为 false |
|
||
| `auto_close` | boolean | 是否允许点击遮罩层关闭模态框（当前未启用此功能） |
|
||
| `width` | string/number | 模态框内部面板的宽度，如 `'500px'` 或 `'80%'` |
|
||
| `height` | string/number | 模态框内部面板的高度 |
|
||
| `bgcolor` | string | 内部面板的背景色，默认为 `#e8e8e8` |
|
||
| `title` | string | 模态框标题，会显示在顶部标题栏中 |
|
||
| `archor` | string | 定位锚点，取值包括 `tl`, `tc`, `tr`, `cl`, `cc`, `cr`, `bl`, `bc`, `br`，默认为 `'cc'`（居中） |
|
||
|
||
> 注：`org_index` 和 `timeout` 在 `BaseModal` 中定义但未在 `Modal` 构造函数注释中列出，可能已弃用或由基类处理。
|
||
|
||
### 主要事件
|
||
| 事件名 | 触发时机 |
|
||
|-------------|--------|
|
||
| `opened` | 调用 `open()` 方法后触发，表示模态框已显示 |
|
||
| `dismissed` | 调用 `dismiss()` 方法并成功移除模态框后触发 |
|
||
| `click` | 当用户点击模态框遮罩层时触发（仅当启用了 `auto_close` 功能时绑定，目前被注释） |
|
||
|
||
---
|
||
|
||
# ModalForm
|
||
|
||
## 控件功能，类型（容器控件或容器控件），父类控件
|
||
- **控件功能**：`ModalForm` 是一个基于弹窗的表单模态框控件，用于快速构建并显示一个包含动态表单的模态窗口。常用于数据录入、配置设置等场景。
|
||
- **类型**：容器控件（内部包含 Form 子控件）
|
||
- **父类控件**：`bricks.PopupWindow`
|
||
|
||
### 初始化参数
|
||
| 参数名 | 类型 | 说明 |
|
||
|--------------|------------|------|
|
||
| `auto_open` | boolean | 是否在构造完成后自动打开模态框（通过延迟任务实现） |
|
||
| `width` | string/number | 表单模态框的宽度 |
|
||
| `height` | string/number | 表单模态框的高度 |
|
||
| `bgcolor` | string | 背景色（传递给父类使用） |
|
||
| `archor` | string | 定位方式，同 `Modal`，控制表单位置 |
|
||
| `title` | string | 表单标题，显示在表单头部 |
|
||
| `description` | string | 表单描述文本，显示在标题下方 |
|
||
| `fields` | array | 表单项配置数组，用于定义输入字段结构 |
|
||
| `binds` | array | 可选的数据绑定配置，用于关联模型或状态 |
|
||
| `user_data` | any | 用户自定义数据，可用于扩展用途（当前未直接使用） |
|
||
| `submit_url` | string (非构造参数) | 提交 URL（需外部设置，用于提交逻辑） |
|
||
|
||
> 注意：`ModalForm` 使用异步方法 `build_form` 延迟 0.2 秒创建表单，确保 DOM 环境准备就绪。
|
||
|
||
### 主要事件
|
||
| 事件名 | 触发时机 |
|
||
|-------------|--------|
|
||
| `submit` | 当表单提交时触发，携带表单数据作为参数 |
|
||
| `submited` | 当表单完成提交流程后触发（由 Form 的 `submited` 事件转发），携带服务器返回数据 |
|
||
| `cancel` | 当用户点击取消按钮时触发（绑定到 `dismiss` 方法） |
|
||
| `dismissed` | 模态框关闭后触发（继承自基类） |
|
||
|
||
> 说明：该控件依赖于 `Form` 控件的事件机制，并对其进行封装和转发。 |