vue-graph-jsplumb

一、组件属性

1、width:宽 '400px'

2、height:高 '400px'

3、panelclass：左边panel的样式 dafault 'panel'

4、dataclass：右边自定义数据的样式 dafault 'data'

5、nodeId:画布上的节点id前缀

二、组件方法

1、getNodeData(),获取数据返回值object {connect:[{source:'1',target:'0'}],postData:[{},{}]},connect表示连线，postData表示每个节点带的数据
2、addNode(name,type),添加节点，参数节点名称，节点类型
3、nodeRemove(),删除节点，无参
4、nodeClick(index)，点击节点，参数索引
5、点击连线删除连线

三、模板命名

组件分为三个部分，左侧操作区，中间画布，右侧节点数据
三个部分的模板依次是
左边模板：有name的模板：slot:operate
中间模板：作用域模板：slot-scope：自定义节点的内容，参数为 {data } 例如：slot-scope = "nodesData" {{nodesData.data}}
右边模板：有name的作用域模板：slot-scope：参数为 {selectData} 例如：slot-scope = "selfData" {{selfData.selectData}}

四、使用方法（仅在vue项目中使用）

1、下载组件 npm i vue-graph-jsplumb
2、引用组件
import workflow from 'vue-graph-jsplumb'
components:{workflow},
3、使用
``html

``