diff --git a/docs/api/editor/events.md b/docs/api/editor/events.md index 45277004..e4972805 100644 --- a/docs/api/editor/events.md +++ b/docs/api/editor/events.md @@ -31,3 +31,25 @@ - **事件回调函数:** (e: any) => void 注意:`Editor.vue` 中该 emit 的类型签名为 `[e: any]`,运行时通常为 `Error` 实例(来自 `submitForm` 抛错),但也可能是 element-plus 校验返回的 `invalidFields` 结构,业务侧消费时建议先做类型判断 + +## layer-node-dblclick + +- **详情:** "已选组件"面板中组件树节点被双击时触发 + + 默认行为(切换可展开节点的展开/收起状态)会先于该事件执行;可通过 [`beforeLayerNodeDblclick`](./props.md#beforelayernodedblclick) 钩子拦截,返回 `false` 时该事件不会被触发 + +- **事件回调函数:** (event: MouseEvent, data: [TreeNodeData](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)) => void + +- **示例:** + +```html + + + +``` diff --git a/docs/api/editor/props.md b/docs/api/editor/props.md index c9f10b11..7e6331a4 100644 --- a/docs/api/editor/props.md +++ b/docs/api/editor/props.md @@ -1292,6 +1292,49 @@ const layerNodeIsExpandable = (data, nodeStatusMap) => { 第三方业务可从 `@tmagic/editor` 直接导入 `defaultIsExpandable` 复用默认逻辑作为兜底。 ::: +## beforeLayerNodeDblclick + +- **详情:** + + "已选组件"面板组件树节点双击前的钩子函数 + + 在用户双击组件树节点时,先于默认行为执行;返回 `false` 时阻止默认行为(默认行为是切换可展开节点的展开/收起状态)。返回其他值(包括 `true`、`undefined`、`Promise`)则继续执行默认行为,并向上抛出 [`layer-node-dblclick`](./events.md#layer-node-dblclick) 事件。 + + 常见用途:拦截特定类型节点的双击行为,或在双击时执行业务自定义动作(如重命名、打开抽屉等)后阻断默认展开/收起。 + +- **默认值:** `undefined` + +- **类型:** `(event: MouseEvent, data: TreeNodeData) => boolean | void | Promise` + +- **示例:** + +```html + + + +``` + +::: tip +- 该钩子仅作用于"已选组件"面板的组件树节点,不影响画布上的双击行为(画布双击请使用 [`beforeDblclick`](#beforedblclick))。 +- 返回 `false` 时,会同时阻断默认的"展开/收起"行为以及向上抛出的 [`layer-node-dblclick`](./events.md#layer-node-dblclick) 事件;返回其他值则继续触发默认行为并抛出事件。 +::: + ## extendFormState - **详情:** diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue index 62e11e44..e37ff2bf 100644 --- a/packages/editor/src/Editor.vue +++ b/packages/editor/src/Editor.vue @@ -28,6 +28,8 @@ :next-level-indent-increment="treeNextLevelIndentIncrement" :layer-node-is-expandable="layerNodeIsExpandable" :can-drop-in="canDropIn" + :before-layer-node-dblclick="beforeLayerNodeDblclick" + @layer-node-dblclick="layerNodeDblclickHandler" >