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