? ? ? 先介紹一下背景吧。最近做的一個(gè)項(xiàng)目，用到了jsplumb萧落，網(wǎng)上搜刮了一圈發(fā)現(xiàn)jsplumb的文章是不少，但是都解釋的很籠統(tǒng)洗贰，而且大部分是合jquery配合使用的找岖。所以就從官方文檔下手開始我們的vue+jsplumb（踩坑）之旅。
一敛滋、安裝?jsPlumb
vue?項(xiàng)目中安裝?jsPlumb?模塊
npm?install?jsPlumb?--save
main.js?中引入?jsPlumb（全局引入许布，也可以局部引入）
import?jsPlumb?from?‘jsplumb‘
Vue.prototype.$jsPlumb?=?jsPlumb.jsPlumb
二、使用jsplumb
組件內(nèi)部使用：this.$jsPlumb來調(diào)用
例如绎晃，我的項(xiàng)目是一個(gè)畫布蜜唾，有很多節(jié)點(diǎn)杂曲，不光要是要直接畫，而且要在讀數(shù)據(jù)的時(shí)候初始化上次的內(nèi)容....
so袁余；
1擎勘、通過后端接口取到數(shù)據(jù)。
2颖榜、在dom渲染完成之后在去進(jìn)行畫布渲染（$nextTick 內(nèi)進(jìn)行initJsPlumb）棚饵。
3、正常流程：默認(rèn)情況下掩完，jsPlumb在瀏覽器的窗口中注冊(cè)噪漾，為整個(gè)頁(yè)面提供一個(gè)靜態(tài)實(shí)例，所以也可以把它看成一個(gè)類且蓬，來實(shí)例化jsPlumb：
? ? a：初始化jsplumb ：this.jsplumbInstance = this.$jsPlumb.getInstance();（ 重點(diǎn)提一下這里用到了jsPlumb的getInstance()方法欣硼，之前沒加會(huì)遇到一些坑，所以這里提一下這個(gè)getInstance是jsplumb的一個(gè)模塊組 可以在該方法中傳入?yún)?shù)缅疟，是一個(gè)object分别，里面可以設(shè)置一些端點(diǎn)及連線的配置項(xiàng)，我這里是沒有設(shè)置存淫，因?yàn)槲倚枰獎(jiǎng)討B(tài)配置，見后文）
? ? b：在this.jsplumbInstance.ready(function() {})中去做渲染工作
一張圖能解決的問題沼填，就不多bb了
這里提一下桅咆；
setcontainer('你的畫布容器ID')；
common就是上文提的全局的jsplumb配置項(xiàng)坞笙，我這邊在相應(yīng)位置拿到之后通過需求在自定義不同的方案后進(jìn)行渲染工作岩饼。（當(dāng)然你也可以在初始化的時(shí)候配置一套固定的）。
畫點(diǎn)：
接下來就是問題較多的部分了薛夜，因?yàn)镴splumb提供了多重渲染方式籍茧，經(jīng)過測(cè)試目前通過這種方式做的渲染，個(gè)人感覺是比較ok的梯澜，至少?zèng)]QA沒問題寞冯。
通過調(diào)用jsplumb的addEndpoint來繪制端點(diǎn)，第一個(gè)參數(shù)為該端點(diǎn)的唯一標(biāo)識(shí)晚伙，第二個(gè)參數(shù)是端點(diǎn)的配置項(xiàng)吮龄，提一下這里用的是uuid的方式，后面連線也使用uuid咆疗。第三個(gè)參數(shù)是上文提到的jsplumb默認(rèn)配置項(xiàng)漓帚。
需求里所有的節(jié)點(diǎn)都是可以拖動(dòng)的，其實(shí)我已經(jīng)用自定義指令實(shí)現(xiàn)了午磁，這里也調(diào)一下jsplumb的draggable方法尝抖。
畫線：
? ? 調(diào)用jsplumb的connect方法毡们，第一個(gè)參數(shù)接對(duì)象
? ? ?this.jsplumbInstance.connect( {uuids：['源端點(diǎn)id','連接點(diǎn)id']}, 配置項(xiàng)(本例中common) )
這樣其實(shí)就已經(jīng)做到每次讀取數(shù)據(jù)后，初始化端點(diǎn)及連線昧辽。
設(shè)置各個(gè)點(diǎn)的z-index：
其實(shí)如果正常使用感覺這點(diǎn)沒有必要漏隐，但是我們的需求是要頻繁的讀和畫，會(huì)出現(xiàn)端點(diǎn)被覆蓋的情況奴迅，所以每次讀的時(shí)候設(shè)置設(shè)置一下zindex青责。代碼如圖，簡(jiǎn)單的解釋一下取具，'jtk-endpoint'就是jsplumb畫出的端點(diǎn)元素的class脖隶，node是我的節(jié)點(diǎn)（所有的端點(diǎn)是畫在每一個(gè)節(jié)點(diǎn)里的）。dot是一個(gè)自定義的端點(diǎn)樣式暇检，為了后面好對(duì)改端點(diǎn)進(jìn)行樣式處理产阱，它是被蓋在所有端點(diǎn)下的（可以理解為jsplumb畫出的端點(diǎn)是透明的，做交互的块仆，具體樣式有dot這個(gè)元素來展現(xiàn)）构蹬，至于為什么加dot ，后文再提（加需求）庄敛。注意在新建節(jié)點(diǎn)時(shí)也要設(shè)置下該節(jié)點(diǎn)的 zindex，防止 出現(xiàn)預(yù)期之外的錯(cuò)誤科汗。
最后再補(bǔ)個(gè)雞腿吧
因?yàn)樾枨笫且涗浻脩魧?duì)節(jié)點(diǎn)的拖動(dòng)位置記錄的藻烤。所以用自定義指令去實(shí)現(xiàn)的兴猩。
綁到每個(gè)節(jié)點(diǎn)上就可以愉快的實(shí)時(shí)記錄下該節(jié)點(diǎn)的移動(dòng)位置，已達(dá)到下次畫節(jié)點(diǎn)記錄位置的功能衅码。這里需要再update中再調(diào)用一下亿驾，不然如果刪除中間位置節(jié)點(diǎn)的情況郭蕉，inseted中的index無法更新的問題（小坑）旁振。
