vue使用jsplumb 流程图

2023-11-23 06:01:59

npm install jsplumb

效果图：

初始化jsPlumb一定要在mounted函数里面，要执行在dom渲染完成的时候
一定要设置绑定的容器，不然连线的容器外加入任何其他布局元素，线会偏移，需要给绑定的容器设置position:relative（原因不详，因为我不设置这个属性线偏移的很严重）
路由切换或者多容器需要连线设置，需要重置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实例，清除所有的连接线和端点

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！