jsPlumb使用簡述

1.jsPlumb的做用：
用於繪製dom元素之間的連線的一個框架，須要一個開始點的id,以及結束點的id就能夠進行連線。能夠經過屬性設置連線端點的位置、連線的樣式、斷開鏈接等內容

---

2.安裝jsPlumb
（1）安裝jsPlumb的依賴：

npm i jsplumb

（2）在main.js中進行掛載:

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

---

3.vue項目中應用（react同理）
（1）引用jsPlumb，設置父級容器
若是不須要改變鏈接狀態（斷開，實線變虛線，改變鏈接dom等），直接在連線方法前加上便可

var jsPlumbs = jsPlumb.getInstance(); （引入實例）
jsPlumbs.setContainer("#boxParent"); （設置父級容器）

若是須要常常手動改變鏈接狀態建議寫在mounted當中

this.$nextTick(() => {
  var jsPlumbs = jsPlumb.getInstance();
  jsPlumbs.setContainer("#boxParent");
  this.jsPlumbs = jsPlumbs;
});

注意：

1.若是不設置父級元素jsPlumb的連線會基於全局進行定位，會致使連線位置出現誤差
2.若是引用jsPlumb的方法直接寫在<script>標籤中，切換router會出現連線顯示不出來的問題

（2）爲防止連線位置偏離須要給父級容器（設置#boxParent那一層）設置css屬性：

position: relative;

給具體應用jsPlumb進行連線的內容設置css屬性：

position: absolute;

（3）具體連線的方法

jsPlumbs.ready(function() {
        jsPlumbs.connect({
            source: '開始id',
            target: '結束id',
            anchor: [Right, Left],
            endpoint: ["Dot"],
            connector: ["Bezier", { curviness: '150' }],
            paintStyle: {
                    stroke: "#9254DE",
                    strokeWidth: 1.5,
                    dashstyle: '3',
                  },
            endpointStyle: {
                    fill: "#120e3a",
                    outlineStroke: "#120e3a",
                    outlineWidth: 0,
                  },
        });
   })

註釋

1.jsPlumbs.connect：連線的具體方法，可循環調用鏈接多條線
2.source與target：進行鏈接的兩個節點設置的id
3.anchor鏈接線端點的位置：Left Right Top Bottom Center TopRight TopLeft BottomRight BottomLeft
4.Endpoint設置端點類型：Dot 圓點、Rectangle 矩形、Image 圖像、Blank 空白
5.connector連線類型：Bezier 貝塞爾曲線（經過{ curviness: '150' }能夠設置弧度，默認150） 、Straight 直線、Flowchart 流程圖、State Machine 狀態機
6.paintStyle：設置鏈接線的樣式，strokeWidth設置粗細，dashstyle控制是不是虛線
7.endpointStyle：設置端點的樣式

（4）清除鏈接（用於清除以前全部的連線）

jsPlumbs.reset();

參考文章：jsplumb 中文基礎教程