簡書 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使用的詳細內容，更多請關注TW511.COM其它相關文章！