---
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函数中。
