Openblocks Drawer 抽屉组件实战：布局定位、尺寸控制与 openDrawer/closeDrawer 事件触发-育师

低代码
后端
前端
开发工具

【免费下载链接】openblocks

🔥 🔥 🔥 The Open Source Retool Alternative

项目地址：https://gitcode.com/gh_mirrors/op/openblocks

Drawer（抽屉）是 Openblocks 中用于在应用主界面上方弹出侧边浮层的组件，它可以在不打断主窗口工作流的前提下展示信息或完成操作，典型场景如购物车、筛选面板、设置面板等。本文以官方组件指南 docs/build-apps/component-guides/drawer.md 为核心脉络，结合仓库内 Drawer 组件源码（drawerComp.tsx），系统讲解 Drawer 的布局与编辑规则、放置方向、宽度/高度定制边界，以及如何通过事件处理器与 JS 代码调用openDrawer/closeDrawer方法完成打开与关闭控制。读完本文，你将能够在一个应用内独立搭建并完整控制自己的 Drawer 抽屉。

认识 Drawer：不打断主流程的浮层侧栏

在 Openblocks 中，Drawer是一个叠加式侧边栏（overlay sidebar），用于在主窗口之上展示信息或执行操作，而不中断主窗口正在进行的工作流。它特别适合承载"临时上下文"型的内容，例如电商应用中的购物车：用户在主页面浏览商品，点击按钮后购物车从侧边滑出，查看完毕后再收回，全程无需离开当前页面。

下图演示了官方文档中使用 Drawer 构建的在线购物购物车示例：

从源码结构看，Drawer 在 Openblocks 中是一种"hook 组件"（非 UI 画布组件），它在 hookCompTypes.tsx 中被归类为category: "ui"且允许非单例（singleton: false），并在 hookComp.tsx 的HookMap中以drawer: DrawerComp注册。这意味着一个应用可以存在多个 Drawer 实例，它们与 Modal 一样挂在应用的全局层级之上。

Layout：拖拽插入与编辑模式下的隔离

通过拖拽操作插入后，Drawer默认浮动在主窗口的右侧，你可以按需继续往 Drawer 上添加各类组件（按钮、列表、表格等），把它当作一个独立的"容器画布"来布局。

编辑模式下的组件隔离

在 Drawer 的编辑模式下，画布上的其他组件不可编辑。这一行为在源码中由 hookComp.tsx 的SelectHookView逻辑保障：当从左侧面板或"新增组件"来源选中 Drawer（及其子组件）时，会通过changeChildAction("value", true)自动将visible置为true以进入编辑态；而当选中画布上的其他组件时，若 Drawer 当前可见，则会自动将visible置为false。也就是说，编辑状态下 Drawer 与主画布是互斥聚焦的，避免了两边组件同时被误操作。

关闭后如何重新打开

提示：当 Drawer 被关闭后，你可以在左侧面板的Modals标签页中点击对应的标签重新打开它。

左侧面板的 Modals 标签在 LeftContent.tsx 中实现：modalsCollapse通过getTreeUI(TreeUIKey.Modals)渲染所有 Modal / Drawer 组件树，并展示在BaseSection name={trans("leftPanel.modals")}区块中。点击其中的 Drawer 标签即会触发上文所述的visible置位逻辑，将抽屉重新拉出到编辑视图中。

Position：四种放置方向

在Properties（属性）标签页中，可以设置 Drawer 的位置（placement），默认位置是主窗口的右侧。

源码中位置选项定义在 drawerComp.tsx 的PlacementOptions常量中，共支持四个方向：

选项	属性面板文案	说明
`top`	Top / 顶部	从主窗口顶部滑出，此时可配置高度（height）
`right`	Right / 右侧	默认值，从右侧滑出，此时可配置宽度（width）
`bottom`	Bottom / 底部	从底部滑出，此时可配置高度（height）
`left`	Left / 左侧	从左侧滑出，此时可配置宽度（width）

位置属性在属性面板中以单选按钮（radioButton: true）形式呈现。放置方向还决定了后续"尺寸控制"中到底调整宽度还是高度——这是理解 Drawer 尺寸配置的关键前提。

Resize：宽度与高度的定制边界

在Properties标签页中，你可以以像素或百分比为单位设置 Drawer 的宽度。需要特别注意的是：Drawer 的高度默认与主窗口一致，且不可自定义（这一约束仅针对左右滑出方向；顶部/底部滑出时则可配置高度）。

从源码实现（drawerComp.tsx）可以进一步确认尺寸机制：

默认宽度 378px：常量DEFAULT_SIZE = 378，当宽度未填时生效；
数字与百分比兼容：transToPxSize函数对纯数字自动补px后缀，非数字则按原样传入（例如520会变为520px，而60%保持百分比形式）。属性面板的 tooltip 文案也明确标注为 "Number or percentage, e.g. 520, 60%"（见 en.ts）；
左右方向：只展示width输入框，高度由主窗口决定（height传空字符串）；
上下方向：top/bottom时高度可调，且增加AutoHeight（自动高度）开关；当关闭自动高度时，会额外显示height输入框（默认同样为 378px，tooltip 示例为378）；
运行时缩放：非用户视图模式下，Drawer 可通过拖拽边缘实时调整大小，onResizeStop回调会根据方向把新尺寸写回width或height状态（drawerComp.tsx）。

引用 Drawer 的两种方式

你可以在应用中的任何位置通过 JS 代码引用 Drawer，也可以通过Properties > Interaction > Event handlers中的Control component（控制组件）动作来调用它。

方式一：JS 代码直接引用

Drawer 对外暴露了状态与方法（由withMethodExposing/withExposingConfigs包装，见 drawerComp.tsx）：

暴露项	类型	说明
`drawer.visible`	布尔状态	当前是否可见，可读写，也可在 JS 中直接赋值控制
`drawer.openDrawer()`	方法	打开抽屉（无参数），等价于把`visible`置为`true`
`drawer.closeDrawer()`	方法	关闭抽屉（无参数），等价于把`visible`置为`false`

因此可以在任意 JS 代码（按钮的onClick、查询的预处理脚本、定时器等）中写：

// 打开购物车抽屉 cart.openDrawer(); // 关闭购物车抽屉 cart.closeDrawer(); // 或者直接操作可见性状态 cart.visible = true;

方式二：Control component 动作的底层机制

在事件处理器中选择Control component作为动作时，其实是在使用executeCompAction机制（executeCompAction.tsx）。其实现原理为：从editorState.getAllUICompMap()中收集所有暴露了方法的组件及其exposingInfo().methods，在属性面板中以下拉框选择目标组件与方法名；运行时通过routeByNameAction配合customAction({ type: "execute", methodName, params })定位到具体组件实例并执行对应方法。这也解释了为何属性面板中"组件"和"方法"是两个联动下拉框——方法列表由所选组件动态决定。

实战：通过按钮打开与关闭购物车抽屉

以下步骤来自官方文档中"在线购物"示例的购物车场景，实现了"点击按钮弹出购物车、点击继续购物收回购物车"的完整闭环。

触发 openDrawer

添加一个按钮（Button），并将其重命名为gotoCart；
为按钮设置事件处理器（Event handlers）：在Action下拉框中选择Control component，然后选择组件cart、方法openDrawer。所有设置会自动保存。

点击gotoCart按钮，绑定的cart抽屉即被打开。

触发 closeDrawer

触发closeDrawer的方式与触发openDrawer完全类似，区别仅在于方法选择为closeDrawer：

添加一个按钮并重命名为gobackShopping（例如显示为"Continue Shopping / 继续购物"）；
为该按钮设置事件处理器：Action选择Control component，选择组件cart、方法closeDrawer，设置自动保存；
点击"继续购物"按钮，绑定的cart抽屉即被关闭。

由于openDrawer/closeDrawer均为无参方法（params: []），在上述动作配置中不需要填写任何参数，这也是它们适合作为事件动作直接调用的原因。

补充配置：遮罩、层级与样式

除位置和尺寸外，Drawer 在属性面板的基础（Basic）区块中还有几项实用配置，同样可在源码 drawerComp.tsx 中确认：

点击遮罩关闭（Mask closable）：默认开启（maskClosable: withDefault(BoolControl, true)）。开启后用户点击抽屉外的半透明遮罩即可关闭抽屉；
显示遮罩（Show mask）：默认开启（showMask: withDefault(BoolControl, true)）。关闭后遮罩不渲染，抽屉浮层不会阻挡底层交互；
层级：Drawer 的zIndex为常量Layers.drawer = 950（见 Layers.ts），高于普通画布组件，确保浮层始终位于上层；
样式：Drawer 支持背景色设置，DrawerStyle定义为[getBackground()]（见 styleControlConstants.tsx），并且内部内容区域通过BackgroundColorContext将背景色传递给子组件；容器内边距为固定 16px（DEFAULT_PADDING = 16）。

配合位置、尺寸与遮罩行为，即可把 Drawer 从"默认的右侧窄条"调整成符合业务需要的任意形态——例如从底部弹出的筛选面板，或从左侧滑出的导航抽屉。

小结

本文基于官方组件指南并对照源码，完整梳理了 Openblocks Drawer 组件的使用要点：它默认悬浮于主窗口右侧、支持上下左右四种放置方向；宽度支持像素与百分比两种写法，高度在左右方向与主窗口一致、在上下方向可自定义并支持自动高度；编辑模式下与画布组件互斥聚焦，关闭后可从左侧Modals标签重新打开。在事件控制层面，既可在任意 JS 代码中通过drawer.visible、drawer.openDrawer()、drawer.closeDrawer()直接操作，也可在事件处理器中借助Control component动作无参数调用，从而轻松实现"按钮打开抽屉、按钮关闭抽屉"的完整交互闭环。