设置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 | 浏览器原生事件，鼠标在抽屉组件范围内移动时触发，可用于动态加载内容、显示悬浮提示等需求。 |
