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
ref="workflow"
@getNodeData = "getData"
:width = "'70%'"
:height = "'400px'"
:nodeId = "nodeId"
>
左边操作区
//nodesData可以自己定义
{{nodesData.data}}
//selfData可以自己定义
//组件
``