第一次用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