jsplumb应用场景快速开发_jsplumb.getinstance-CSDN博客

本文链接：https://blog.csdn.net/weixin_44208404/article/details/126346113

1 基础元素组成

（1）源对象：source
（2）目的对象：target
（3）锚点：Anchor
（4）连接线：Connector
（5）端点：Endpoint
（6）Overlay：添加到连接线上的附件

2 jsplumb初使用

import {jsPlumb} from 'jsplumb'

const $jsPlumb=jsplumb.jsplumb	//调用这个接口就行

使用$jsPlumb.getInstance({})	//创建jsPlumb实例

那我现在需要在某个指定区域内画流程图又该如何

//可以设置容器来解决
$jsPlumb.setContainer('')	//注意设置的容器必须设置position:relative	!!!

为什么要进行上述操作呢？

因为jsPlumb会给它自己画的元素添加position:absolute

但有时候窗口resize时，jsPlumb不会自动跟踪dom元素位置，导致对不齐，设置为px可以解决这个问题，但是设置为响应式单位的话，必须使用window.resize

3 jsPlumb的运行时机

jsPlumb必须等元素加载完才能使用，所以一般写在onMounted生命周期钩子里，并使用$jsPlumb.ready(()=>{})

4 离开页面时需要进行什么操作？

当离开页面时需要使用$jsPlumb.reset()方法清除缓存，不然它将一直保存在浏览器缓存中，下次进入页面容易出现bug

5 在$jsPlumb.getInstance()中使用api


let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象

onMounted(()=>{
	showPlumb()
})

const showPlumb=()=>{
	jsPlumb_instance=$juPlumb.getInstance({
		Container: 'container',	//容器的id
		EndpointStyle:{radius:2,fill:'red'},	//锚点的样式
		PaintStyle:{stroke:'#000',strokeWidth:2},	//绘画样式
		HoverPaintStyle:{stroke:'red'},		//悬停样式
		ConnectionOverlays:[	//连接的覆盖层，设置所有箭头的样式
			'Arrow',{
				width:2,	//箭头尾部宽度
				length:2,	//箭头尾部到头部距离
				location:1,	//箭头出现在连接器上的位置，即箭头在直线上的位置
				direction:1,	//箭头方向,-1为反向
				foldback: 1,	//尾部指向折返的箭头多远，就是箭头尾部向左右的缩进程度
				paintStyle:{},
			}
		]，
		Connector:['Straight'],	//要使用的默认连接器类型:直线、折线、曲线
		DrapOptions:[],	//为拖拽元素设置样式

	})
}