设置UI引擎前端页面抽屉组件属性
抽屉组件是一种在主页面上快速展示补充信息、提供次级导航或进行临时操作的交互组件，广泛应用于侧边栏菜单、详情面板、筛选/设置面板以及内容预览/创建表单等场景。既能保留主页面上下文，又能高效承载次级操作，提升工业控制界面的交互连贯性。
前提条件
已在当前页面添加“抽屉”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“抽屉”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
是否显示 |
控制抽屉组件的显示与隐藏（通常结合触发条件动态控制）。 |
是 |
|
标题 |
抽屉的标题，显示在头部区域。 |
是 |
|
标题提示 |
抽屉标题对应的提示内容，鼠标移入时会显示提示信息。 |
是 |
|
宽度 |
抽屉容器区域的宽度，支持视口宽度单位“px”。 |
是 |
|
显示头部 |
是否显示默认的头部内容（包括标题、标题提示和关闭按钮）。 关闭后将隐藏标题、标题提示及自带关闭按钮，适用于无需头部信息的极简场景。 |
是 |
|
显示底部 |
是否显示默认的底部内容（包括分隔线及以下的内容）。 关闭后将隐藏底部分隔线及默认按钮区域，适用于自定义底部操作的场景。 |
是 |
|
确认按钮禁用 |
是否禁用确认按钮。 如果使用了“底部区域”插槽覆盖了默认的底部内容，则此属性无效。 |
是 |
|
支持宽度拖拽 |
抽屉的宽度是否支持拖拽调整。 |
是 |
|
遮罩层 |
是否显示遮罩层，用于突出抽屉内容并防止主页面交互。 |
是 |
|
点击遮罩层关闭 |
是否可以通过单击遮罩层关闭抽屉。 |
是 |
|
堆叠顺序 |
当页面存在多个抽屉组件，或与其他带遮罩层的组件（如对话框）并存时，用于控制组件堆叠优先级，值越大越靠上层，可避免多组件叠加导致的操作遮挡问题。 |
是 |
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
插槽信息
|
插槽名称 |
说明 |
|---|---|
|
头部区域 |
用于自定义抽屉头部内容。仅在“显示头部”开启时生效。 |
|
底部区域 |
用于自定义抽屉底部内容。仅在“显示底部”开启时生效。 |
组件事件
|
事件名称 |
类型定义 |
说明 |
|---|---|---|
|
onClose |
() => void |
单击抽屉自带关闭按钮时触发，可绑定关闭后的数据重置、页面刷新等业务逻辑。 |
|
onConfirm |
() => void |
单击抽屉底部默认确认按钮时触发，常用于参数提交、操作确认等逻辑。 如通过插槽覆盖底部按钮，此事件无效。 |
|
onShow |
() => void |
抽屉组件显示时触发，可绑定数据加载、参数初始化等操作（如显示时加载最新设备运行数据）。 |
|
onClick |
(e: MouseEvent) => void |
浏览器原生事件，单击抽屉容器范围内任意位置时触发，可用于捕捉抽屉内非按钮元素的点击交互。 |
|
onChange |
(e: MouseEvent) => void |
浏览器原生事件，抽屉组件关联值发生改变时触发，适用于捕捉表单输入、选项切换等数据变更场景。 |
|
onFocus |
(e: MouseEvent) => void |
浏览器原生事件，抽屉组件获取焦点时触发，可用于高亮显示、提示操作指引等场景。 |
|
onMousemove |
(e: MouseEvent) => void |
浏览器原生事件，鼠标在抽屉组件范围内移动时触发，可用于动态加载内容、显示悬浮提示等需求。 |
