# 设置UI引擎前端页面对话框组件属性
模态对话框是一种在浮层中显示的交互组件，常用于数据展示、参数配置、设备信息查看或嵌入表单进行数据录入。对话框组件支持自定义标题、按钮、尺寸、拖拽等功能，并可通过变量绑定实现动态控制。
#### 前提条件
已在当前页面添加"对话框"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"对话框"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503727148.png)，即可展开"属性"设置面板。
 
#### 基础信息
| 属性名称    | 说明                                                                                                                                             | 是否支持变量绑定 |
|:---|:---|:---|
| 是否显示    | 控制对话框组件的显示与隐藏（通常结合触发条件动态控制）。                                                                                                                   | 是        |
| 标题      | 对话框内容的标题，显示在头部区域。                                                                                                                              | 是        |
| 标题提示    | 对话框标题的提示内容，如果有提示内容，则会在标签右方显示一个![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501113574.png "点击放大")，鼠标移入时显示提示内容。 | 是        |
| 宽度      | 对话框的宽度（不包括遮罩层），单位为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 ``` | 浏览器原生事件，鼠标在组件范围内移动时触发。                  |