场景一：扩展选中节点操作项

增加节点操作项

image.png
选中节点后，在选中框的右上角有操作按钮，编排模块默认实现了查看组件直系父节点、复制节点和删除节点按钮外，还可以通过相关 API 来扩展更多操作，如下代码：

  1. import { plugins } from '@alilc/lowcode-engine';
  2. import { Icon, Message } from '@alifd/next';
  4. const addHelloAction = (ctx: ILowCodePluginContext) => {
  5.   return {
  6.     async init() {
  7.       const { addBuiltinComponentAction } = ctx.material;
  8.       addBuiltinComponentAction({
  9.         name: 'hello',
  10.         content: {
  11.           icon: <Icon type="atm" />,
  12.           title: 'hello', 
  13.           action(node: Node) {
  14.             Message.show('Welcome to Low-Code engine');
  15.           },
  16.         },
  17.         condition: (node: Node) => {
  18.           return node.componentMeta.componentName === 'NextTable';
  19.         },
  20.         important: true,
  21.       });
  22.     }
  23.   };
  24. }
  25. addHelloAction.pluginName = 'addHelloAction';
  26. await plugins.register(addHelloAction);

效果如下：
image.png
具体 API 参考：https://www.yuque.com/lce/doc/mu7lml#ieJzi

删除节点操作项

  1. import { plugins } from '@alilc/lowcode-engine';
  3. const removeCopyAction = (ctx: ILowCodePluginContext) => {
  4.   return {
  5.     async init() {
  6.       const { removeBuiltinComponentAction } = ctx.material;
  7.       removeBuiltinComponentAction('copy');
  8.     }
  9.   }
  10. }
  11. removeCopyAction.pluginName = 'removeCopyAction';
  12. await plugins.register(removeCopyAction);

效果如下：
image.png
具体 API 参考：https://www.yuque.com/lce/doc/mu7lml#va9mb

实际案例

区块管理