lowflow-web/doc/docs/document/frontend.md

---

title: 扩展节点

以NotifyNode节点为例。

1.定义类型

在 src/views/flowDesign/nodes/type.ts 中定义节点类型，继承AssigneeNode类（如果没有类似抄送对象只需继承FlowNode），并定义节点的属性。

2.创建组件

以消息通知节点为例：在 src/views/flowDesign/nodes 文件夹中创建名为 “NotifyNode.vue”组件。

• 1、定义props属性： 定义类型为 NotifyNode 节点的属性。
• 2、注入：注入fields表单字段与nodesError错误信息记录，方便引用表单字段与错误信息的记录。
• 3、定义变量：定义名为content的变量显示节点内容。
• 5、参数校验：使用vue的watchEffect函数实时监听节点属性变量并进行校验，然后更新到content与nodesError中。

• 6、创建模板：引入 './Node.vue' 组件，并设置节点的图标和颜色，以及要展示的内容。

  3.注册节点

  在 src/views/flowDesign/nodes/TreeNode.vue 中注册节点。

  4.属性面板

  在 src/views/flowDesign/panels 文件夹中创建名为“NotifyPanel.vue”的组件。

  5.注册属性面板

  在 src/views/flowDesign/panels/index.vue 中注册节点属性面板。

  6.添加节点

  在 src/views/flowDesign/nodes/add.vue 组件中添加节点。

  7.注册添加事件

  在 src/views/flowDesign/index.vue 定义addNotify赋值默认属性，并注册到addNode函数中。