设置UI引擎前端页面对话框组件属性
模态对话框是一种在浮层中显示的交互组件，常用于数据展示、参数配置、设备信息查看或嵌入表单进行数据录入。对话框组件支持自定义标题、按钮、尺寸、拖拽等功能，并可通过变量绑定实现动态控制。
前提条件
已在当前页面添加“对话框”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“对话框”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
| 属性名称 | 说明 | 是否支持变量绑定 |
|---|---|---|
| 是否显示 | 控制对话框组件的显示与隐藏（通常结合触发条件动态控制）。 | 是 |
| 标题 | 对话框内容的标题，显示在头部区域。 | 是 |
| 标题提示 | 对话框标题的提示内容，如果有提示内容，则会在标签右方显示一个 | 是 |
| 宽度 | 对话框的宽度（不包括遮罩层），单位为px。 | 是 |
| 最大高度 | 对话框内容的最大高度（即插槽占位提示符对应的元素）。 | 是 |
| 显示确认按钮 | 是否在对话框底部右下角显示“确认”按钮。 | 是 |
| 确认按钮名称 | 自定义“确认”按钮的显示文本，默认为“确认”。 | 是 |
| 确认按钮禁用 | 是否禁用“确认”按钮。 | 是 |
| 显示取消按钮 | 是否在对话框底部右下角显示“取消”按钮。 | 是 |
| 取消按钮名称 | 自定义“取消”按钮的显示文本，默认为“取消”。 | 是 |
| 居中 | 对话框的头部与底部内容是否居中显示。 | 是 |
| 可拖拽 | 是否允许通过鼠标长按标题栏拖动对话框。开启后，用户可以通过长按鼠标左键移动对话框的位置。 | 是 |
| 插入到Body | 对话框是否挂载到页面的body节点下，用于避免被父容器样式影响。 | 是 |
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称 | 说明 | 是否支持变量绑定 |
|---|---|---|
| 元素id值 | 对应HTML标签的“id”属性，同一页面内必须唯一。 | 是 |
| 样式类 | 对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 | 是 |
| ref引用类 | 对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 | 是 |
插槽信息
| 插槽名称 | 说明 |
|---|---|
| 头部区域 | 自定义对话框头部内容。启用后将覆盖“标题”与“标题提示”配置。 |
| 底部区域 | 自定义对话框底部内容。启用后将覆盖“确认”和“取消”按钮。 |
组件事件
| 事件名称 | 类型定义 | 说明 |
|---|---|---|
| onClose | () => void | 单击弹窗关闭按钮时触发的事件。 |
| onConfirm | () => void | 单击弹窗底部的确认按钮时触发的事件。如果使用插槽覆盖了底部按钮，则此事件无效。 |
| onClick | (e: MouseEvent) => void | 浏览器原生事件，单击对话框容器范围内的任意位置都会触发。 |
| onChange | (e: MouseEvent) => void | 浏览器原生事件，组件值发生改变时触发。 |
| onFocus | (e: MouseEvent) => void | 浏览器原生事件，组件获取焦点时触发。 |
| onMousemove | (e: MouseEvent) => void | 浏览器原生事件，鼠标在组件范围内移动时触发。 |
