Vue+jsPlumb搭建流程

第一次用vue搭建的项目，在同时有多个表格显示的情况下，还是建议不使用vue这种单页面框架，一旦table数据量大时，页面就会出现几秒的卡动。

回归正题

还是讲讲jsPlumb怎么绘制一个流程图

安装 jsPlumb

npm install jsPlumb --save

安装成功后在node_modules 就会添加一个jsplumb文件夹

在main.js 或者在使用的页面引用jsplumb

注意：这里的引用没办法到具体模块，类似于script引用

import jsplumb from 'jsplumb'
最好确认jsPlumb加载完毕之后，再开始使用相关功能。
默认情况下，jsPlumb在浏览器的窗口中注册，为整个页面提供一个静态实例，所以也可以把它看成一个类，来实例化jsPlumb：

let j = jsPlumb.getInstance({
PaintStyle: {stroke: '#56A7F9', strokeWidth: 2}, //连接线的默认样式
HoverPaintStyle :{stroke: "#13E0F9", strokeWidth: 2},//鼠标滑过连线样式
Endpoint: ["Dot", {radius: 6}], //连线终端点
EndpointStyle: {fill: "#fff",outlineWidth:2,outlineStroke: '#56A7F9', radius: 5}, //这个是控制连线终端那个小点的样式
EndpointHoverStyle: {fill: "#fff",outlineStroke: '#13E0F9'}, //这个是控制鼠标滑过连线终端那个小点的样式
Connector: ["Straight"],//连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight]
ConnectionOverlays: [
["Arrow", {location: 1,width: 11,length: 11,foldback:0.618}],//连线设置箭头
["Label", { //连线上设置label
location: 0.5,
label: "label", //label显示文字
id: "label",
cssClass: "aLabel",
events:{//label点击事件
tap:function() { alert("hey"); }
}
}
]
],
Container: "parentManage" --可拖动区域 ID
});
连线配置

1、整个节点作为有效连接点，例：

j.makeSource(jsPlumb.getSelector(".process-step .node-item"),{ anchor: "Continuous" })
j.makeTarget(jsPlumb.getSelector(".process-step .node-item"),{anchor: "Continuous"})
let connectJson = {
paintStyle : { stroke: '#56A7F9', strokeWidth: 2,dashstyle:"2 4" } //dashstyle设置虚线
}
//建立连线
j.connect({
source: 'item-'+startId,//开始节点ID
target: 'item-'+endId//结束节点ID
},connectJson)
2、设置节点位置作为有效连线点，可自定义不同连线的样式

//自定义样式
let common = {
maxConnections:5,
paintStyle:{
strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4
}
}

//描点
$("#labelManage"+self.index).find('.process-step').each(function (i) {
var id = $(this).attr('process_id');
j.addEndpoint(this,{uuid:id , anchor: "BottomCenter", isSource:true},common);
});
//建立连线
j.connect({uuids: [开始节点ID, 结束节点ID]},connectJson)
拖动配置

let draggable={
containment: 'parent',//拖动范围
drag: function (event, ui) {
event.stopPropagation(); return false;
},
stop: function (event) { //拖动结束执行方法【记录坐标点】
let i = $(event.el).attr("name");
self.list[i].viewConfig.coordinate= {x:event.pos[0],y:event.pos[1]}
event.stopPropagation();
return false;
}
}


j.draggable(jsPlumb.getSelector(".process-step"), draggable);
事件

1、连线之前的判断，主要用于连线之前的有效判断，重新设置连线样式等

注意：如果在此方法在调用了connect 建立连接 return 需返回false ,不然会出现两条连线

j.bind('beforeDrop', function (info) {
//判断连接是否有效

//返回true连接成功（自动添加连线）/返回false连接不生效
return true || false;
})
2、点击连线

j.bind("click", function (conn, originalEvent) {
j.deleteConnection(conn); //删除连线
});
3、删除连线事件

j.bind("connectionDetached", function (info,a,c) {
let startId = $("#"+info.sourceId).attr("process_id"),
endId = $("#"+info.targetId).attr("process_id");

self.relation.forEach((item,index)=>{
if(item.relationFrom == startId && item.relationTo==endId ){
self.relation.splice(index,1);
return false
}
})

});
4、移动连线事件

j.bind("connectionMoved",function(params){
let startId = params.originalSourceId.replace(/item-/g,''),
endId =params.originalTargetId.replace(/item-/g,'');

self.relation.forEach((item,index)=>{
if(item.relationFrom == startId && item.relationTo==endId ){
self.relation.splice(index,1);
return false
}
})
})
效果：

 

 

————————————————
版权声明：本文为CSDN博主「牛牛的季节」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jdj_1/article/details/102899930

 

标签：function,Vue,false,连线,jsPlumb,item,event,搭建
来源： https://www.cnblogs.com/telwanggs/p/15868306.html