mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-06-10 17:33:36 +00:00
85 lines
3.2 KiB
Markdown
85 lines
3.2 KiB
Markdown
---
|
||
title: 插件扩展 - 编排扩展
|
||
sidebar_position: 6
|
||
---
|
||
|
||
## 场景一：扩展选中节点操作项
|
||
|
||
### 增加节点操作项
|
||
|
||
|
||
选中节点后，在选中框的右上角有操作按钮，编排模块默认实现了查看组件直系父节点、复制节点和删除节点按钮外，还可以通过相关 API 来扩展更多操作，如下代码：
|
||
|
||
```typescript
|
||
import { plugins } from '@alilc/lowcode-engine';
|
||
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||
import { Icon, Message } from '@alifd/next';
|
||
|
||
const addHelloAction = (ctx: IPublicModelPluginContext) => {
|
||
return {
|
||
async init() {
|
||
const { addBuiltinComponentAction } = ctx.material;
|
||
addBuiltinComponentAction({
|
||
name: 'hello',
|
||
content: {
|
||
icon: <Icon type="atm" />,
|
||
title: 'hello',
|
||
action(node: Node) {
|
||
Message.show('Welcome to Low-Code engine');
|
||
},
|
||
},
|
||
condition: (node: Node) => {
|
||
return node.componentMeta.componentName === 'NextTable';
|
||
},
|
||
important: true,
|
||
});
|
||
},
|
||
};
|
||
};
|
||
addHelloAction.pluginName = 'addHelloAction';
|
||
await plugins.register(addHelloAction);
|
||
```
|
||
|
||
**_效果如下：_**
|
||
|
||
|
||
|
||
具体 API 参考：[API 文档](/site/docs/api/material#addbuiltincomponentaction)
|
||
### 删除节点操作项
|
||
|
||
```typescript
|
||
import { plugins } from '@alilc/lowcode-engine';
|
||
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||
|
||
const removeCopyAction = (ctx: IPublicModelPluginContext) => {
|
||
return {
|
||
async init() {
|
||
const { removeBuiltinComponentAction } = ctx.material;
|
||
removeBuiltinComponentAction('copy');
|
||
}
|
||
}
|
||
};
|
||
removeCopyAction.pluginName = 'removeCopyAction';
|
||
await plugins.register(removeCopyAction);
|
||
```
|
||
|
||
**_效果如下：_**
|
||
|
||
|
||
|
||
具体 API 参考：[API 文档](/site/docs/api/material#removebuiltincomponentaction)
|
||
|
||
## 实际案例
|
||
|
||
### 区块管理
|
||
|
||
- 仓库地址：[https://github.com/alibaba/lowcode-plugins](https://github.com/alibaba/lowcode-plugins)
|
||
- 具体代码：[https://github.com/alibaba/lowcode-plugins/tree/main/packages/action-block](https://github.com/alibaba/lowcode-plugins/tree/main/packages/action-block)
|
||
- 直播回放：
|
||
- [低代码引擎项目实战 (9)-区块管理 (1)-保存为区块](https://www.bilibili.com/video/BV1YF411M7RK/)
|
||
- [低代码引擎项目实战 (10)-区块管理 - 区块面板](https://www.bilibili.com/video/BV1FB4y1S7tu/)
|
||
- [阿里巴巴低代码引擎项目实战 (11)-区块管理 - ICON 优化](https://www.bilibili.com/video/BV1zr4y1H7Km/)
|
||
- [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 自动截图](https://www.bilibili.com/video/BV1GZ4y117VH/)
|
||
- [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 样式优化](https://www.bilibili.com/video/BV1Pi4y1S7ZT/)
|
||
- [阿里低代码引擎项目实战 (12)-区块管理 (完结)-给引擎插件提个 PR](https://www.bilibili.com/video/BV1hB4y1277o/)
|