javascript欄目介紹jsPlumb的作用

推薦（免費）：javascript（視頻）

1.jsPlumb的作用：
用于繪制dom元素之間的連線的一個框架，需要一個開始點的id,以及結(jié)束點的id就可以進行連線?？梢酝ㄟ^屬性設(shè)置連線端點的位置、連線的樣式、斷開連接等內(nèi)容

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

npm i jsplumb

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

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

3.vue項目中應(yīng)用（react同理）
（1）引用jsPlumb，設(shè)置父級容器
如果不需要改變連接狀態(tài)（斷開，實線變虛線，改變連接dom等），直接在連線方法前加上即可

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

如果需要經(jīng)常手動改變連接狀態(tài)建議寫在mounted當中

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

注意：

1.如果不設(shè)置父級元素jsPlumb的連線會基于全局進行定位，會導(dǎo)致連線位置出現(xiàn)偏差
2.如果引用jsPlumb的方法直接寫在<script>標簽中，切換router會出現(xiàn)連線顯示不出來的問題

（2）為防止連線位置偏離需要給父級容器（設(shè)置#boxParent那一層）設(shè)置css屬性：

position: relative;

給具體應(yīng)用jsPlumb進行連線的內(nèi)容設(shè)置css屬性：

position: absolute;

（3）具體連線的方法

   jsPlumbs.ready(function() {         jsPlumbs.connect({             source: '開始id',             target: '結(jié)束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：連線的具體方法，可循環(huán)調(diào)用連接多條線
2.source與target：進行連接的兩個節(jié)點設(shè)置的id
3.anchor連接線端點的位置：Left Right Top Bottom Center TopRight TopLeft BottomRight BottomLeft
4.Endpoint設(shè)置端點類型：Dot 圓點、Rectangle 矩形、Image 圖像、Blank 空白
5.connector連線類型：Bezier 貝塞爾曲線（通過{ curviness: '150' }可以設(shè)置弧度，默認150） 、Straight 直線、Flowchart 流程圖、State Machine 狀態(tài)機
6.paintStyle：設(shè)置連接線的樣式，strokeWidth設(shè)置粗細，dashstyle控制是否是虛線
7.endpointStyle：設(shè)置端點的樣式

（4）清除連接（用于清除之前所有的連線）

jsPlumbs.reset();