# 设置UI引擎前端页面抽屉组件属性
抽屉组件是一种在主页面上快速展示补充信息、提供次级导航或进行临时操作的交互组件，广泛应用于侧边栏菜单、详情面板、筛选/设置面板以及内容预览/创建表单等场景。既能保留主页面上下文，又能高效承载次级操作，提升工业控制界面的交互连贯性。
#### 前提条件
已在当前页面添加"抽屉"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"抽屉"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535447115.png)，即可展开"属性"设置面板。
 
#### 基础信息
| 属性名称    | 说明                                                                                                             | 是否支持变量绑定 |
|:---|:---|:---|
| 是否显示    | 控制抽屉组件的显示与隐藏（通常结合触发条件动态控制）。                                                                                    | 是        |
| 标题      | 抽屉的标题，显示在头部区域。                                                                                                 | 是        |
| 标题提示    | 抽屉标题对应的提示内容，鼠标移入时会显示提示信息。                                                                                      | 是        |
| 宽度      | 抽屉容器区域的宽度，支持视口宽度单位"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 ``` | 浏览器原生事件，鼠标在抽屉组件范围内移动时触发，可用于动态加载内容、显示悬浮提示等需求。                                                        |