vue使用jsplumb 流程图

1. 安装jsPlumb库：在Vue项目中使用npm或yarn安装jsPlumb库。

npm install jsplumb

1. 创建一个Vue组件：创建一个Vue组件来容纳jsPlumb的功能和呈现。

效果图：

 

 

1.  初始化jsPlumb一定要在mounted函数里面，要执行在dom渲染完成的时候
2. 一定要设置绑定的容器，不然连线的容器外加入任何其他布局元素，线会偏移，需要给绑定的容器设置position:relative（原因不详，因为我不设置这个属性线偏移的很严重）
3. 路由切换或者多容器需要连线设置，需要重置jsPlumb（this.plumbIns?.reset()），不然线会一直在

jsPlumb中一些常用的参数和API的说明

参数/方法	描述
Container	设置连接线的绘制容器，将连接线限制在指定的容器内绘制
Draggable	将元素设置为可拖动，可以被拖动到其他位置
Endpoint	定义连接线端点的样式和行为
Connector	定义连接线的样式和类型
Anchors	定义连接线起始点和目标点的锚点位置
PaintStyle	定义连接线的绘制样式，如颜色、线宽等
hoverPaintStyle	鼠标悬停在连接线上时的绘制样式
Endpoints	定义连接线的起始点和目标点的端点样式
MaxConnections	指定一个元素可以拥有的最大连接数
Scope	用于分组连接线和元素的范围，可以控制连接线的可见性和交互性
ConnectionOverlays	定义连接线上的覆盖物，如箭头、标签等
addEndpoint	动态添加一个连接线的端点
connect	连接两个元素，创建一条连接线
repaintEverything	重新绘制所有连接线和端点，适用于当容器大小改变时需要重新布局时
bind	绑定事件处理程序到连接线或元素上
unbind	取消绑定事件处理程序
removeAllEndpoints	移除所有元素的端点
deleteEndpoint	删除指定元素的一个端点
destroy	销毁jsPlumb实例，清除所有的连接线和端点