bricks/docs/zh/modal.md
2025-11-19 12:30:39 +08:00

3.8 KiB
Raw Permalink Blame History

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_indextimeoutBaseModal 中定义但未在 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 控件的事件机制,并对其进行封装和转发。