vue-graph-jsplumb v1.0.2

vue-graph-jsplumb

一、组件属性

1、width:宽 '400px'<br> 
2、height:高 '400px'<br> 
3、panelclass：左边panel的样式 dafault 'panel'<br> 
4、dataclass：右边自定义数据的样式 dafault 'data'<br> 
5、nodeId:画布上的节点id前缀<br> 

二、组件方法

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

三、模板命名

![](README_files/1.jpg)
组件分为三个部分，左侧操作区，中间画布，右侧节点数据
三个部分的模板依次是
左边模板：有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、使用

<template>
	<workflow
			ref="workflow"
			@getNodeData = "getData"
			:width = "'70%'"
			:height = "'400px'"
			:nodeId = "nodeId"
		>

		<!-- 左侧 -->
		<div slot="operate">
			<h2>左边操作区</h2>
			
			<button type="primary" @click="addNode('节点')">添加节点</button>
		</div>
		<!-- 中间 -->
		<template slot-scope = "nodesData"> //nodesData可以自己定义
			{{nodesData.data}}
		</template>
		<!-- 右侧 -->
		<template slot-scope="selfData" slot="selectData"> //selfData可以自己定义
			<int :data="selfData.selectData"></int>//组件
		</template>
	</workflow>
	</template>