设置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 |
浏览器原生事件，鼠标在组件范围内移动时触发。 |
