javascript欄目介紹jsPlumb的作用

推薦（免費(fèi)）：javascript（視頻）

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

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

npm i jsplumb

（2）在main.js中進(jìn)行掛載:

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

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

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

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

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

注意：

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

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

position: relative;

給具體應(yīng)用jsPlumb進(jìn)行連線的內(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：進(jìn)行連接的兩個(gè)節(jié)點(diǎn)設(shè)置的id
3.anchor連接線端點(diǎn)的位置：Left Right Top Bottom Center TopRight TopLeft BottomRight BottomLeft
4.Endpoint設(shè)置端點(diǎn)類型：Dot 圓點(diǎn)、Rectangle 矩形、Image 圖像、Blank 空白
5.connector連線類型：Bezier 貝塞爾曲線（通過{ curviness: '150' }可以設(shè)置弧度，默認(rèn)150） 、Straight 直線、Flowchart 流程圖、State Machine 狀態(tài)機(jī)
6.paintStyle：設(shè)置連接線的樣式，strokeWidth設(shè)置粗細(xì)，dashstyle控制是否是虛線
7.endpointStyle：設(shè)置端點(diǎn)的樣式

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

jsPlumbs.reset();