vue项目中使用Jsplumb总结

      先介绍一下背景吧。最近做的一个项目，用到了jsplumb，网上搜刮了一圈发现jsplumb的文章是不少，但是都解释的很笼统，而且大部分是合jquery配合使用的。所以就从官方文档下手开始我们的vue+jsplumb（踩坑）之旅。

一、安装 jsPlumb

---

vue 项目中安装 jsPlumb 模块

npm install jsPlumb --save

main.js 中引入 jsPlumb（全局引入，也可以局部引入）

import jsPlumb from ‘jsplumb‘

Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

二、使用jsplumb

---

组件内部使用：this.$jsPlumb来调用

例如，我的项目是一个画布，有很多节点，不光要是要直接画，而且要在读数据的时候初始化上次的内容....

so；

1、通过后端接口取到数据。

2、在dom渲染完成之后在去进行画布渲染（$nextTick 内进行initJsPlumb）。

3、正常流程：默认情况下，jsPlumb在浏览器的窗口中注册，为整个页面提供一个静态实例，所以也可以把它看成一个类，来实例化jsPlumb：

    a：初始化jsplumb ：this.jsplumbInstance = this.$jsPlumb.getInstance();（ 重点提一下这里用到了jsPlumb的getInstance()方法，之前没加会遇到一些坑，所以这里提一下这个getInstance是jsplumb的一个模块组 可以在该方法中传入参数，是一个object，里面可以设置一些端点及连线的配置项，我这里是没有设置，因为我需要动态配置，见后文）

    b：在this.jsplumbInstance.ready(function() {})中去做渲染工作

1

一张图能解决的问题，就不多bb了

这里提一下；

setcontainer('你的画布容器ID')；

common就是上文提的全局的jsplumb配置项，我这边在相应位置拿到之后通过需求在自定义不同的方案后进行渲染工作。（当然你也可以在初始化的时候配置一套固定的）。

画点：

接下来就是问题较多的部分了，因为Jsplumb提供了多重渲染方式，经过测试目前通过这种方式做的渲染，个人感觉是比较ok的，至少没QA没问题。

2

通过调用jsplumb的addEndpoint来绘制端点，第一个参数为该端点的唯一标识，第二个参数是端点的配置项，提一下这里用的是uuid的方式，后面连线也使用uuid。第三个参数是上文提到的jsplumb默认配置项。

3

需求里所有的节点都是可以拖动的，其实我已经用自定义指令实现了，这里也调一下jsplumb的draggable方法。

画线：

    调用jsplumb的connect方法，第一个参数接对象

     this.jsplumbInstance.connect( {uuids：['源端点id','连接点id']}, 配置项(本例中common) )

这样其实就已经做到每次读取数据后，初始化端点及连线。

设置各个点的z-index：

4

其实如果正常使用感觉这点没有必要，但是我们的需求是要频繁的读和画，会出现端点被覆盖的情况，所以每次读的时候设置设置一下zindex。代码如图，简单的解释一下，'jtk-endpoint'就是jsplumb画出的端点元素的class，node是我的节点（所有的端点是画在每一个节点里的）。dot是一个自定义的端点样式，为了后面好对改端点进行样式处理，它是被盖在所有端点下的（可以理解为jsplumb画出的端点是透明的，做交互的，具体样式有dot这个元素来展现），至于为什么加dot ，后文再提（加需求）。注意在新建节点时也要设置下该节点的 zindex，防止 出现预期之外的错误。

最后再补个鸡腿吧

因为需求是要记录用户对节点的拖动位置记录的。所以用自定义指令去实现的。

5

绑到每个节点上就可以愉快的实时记录下该节点的移动位置，已达到下次画节点记录位置的功能。这里需要再update中再调用一下，不然如果删除中间位置节点的情况，inseted中的index无法更新的问题（小坑）。