vue连线 插件_使用jsPlumb插件实现动态连线功能

这周去看了两天的羽毛球亚锦赛，工作有提前晚上加班做一些，但是技术文章却拉下了。

这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。

jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实jsPlumb可能主要是用来做流程图的，它在实现这方面的功能上非常强大，我在项目中只使用了它少部分功能，来实现项目中连线的效果。

连线效果

initJSPlumb = () => {

this.jsp = jsPlumb.getInstance({

//锚点位置；对任何没有声明描点的Endpoint设置锚点，用于source及target节点

Anchor: ["Right", "Left"],

Anchors: ["Right", "Left"], //连线的source和target Anchor

ConnectionsDetachable: false, //连线是否可用鼠标分离

ConnectionOverlays: [ //连线的叠加组件，如箭头、标签

["Arrow", { //箭头参数设置

location: 1,

visible: true,

width: 11,

length: 11,

id: "ARROW",

events: {

click: function () {

}

}

}],

["Label", { //标签参数设置

location: 0.1,

id: "label",

cssClass: "aLabel", //hover时label的样式名

events: {

tap: function () {

}

},

visible: true

}]

],

Connector: "Bezier", //连线的类型，流程图(Flowchart)、贝塞尔曲线等

//父级元素id；假如页面元素所在上层不同，最外层父级一定要设置

Container: "module",

//如果请求不存在的Anchor、Endpoint或Connector，是否抛异常

DoNotThrowErrors: false,

//通过jsPlumb.draggable拖拽元素时的默认参数设置

DragOptions: {cursor: 'pointer', zIndex: 2000},

DropOptions: {}, //target Endpoint放置时的默认参数设置

Endpoint: "Dot", //端点(锚点)的样式声明

//用jsPlumb.connect创建连接时，source端点和target端点的样式设置

Endpoints: [null, null],

EndpointOverlays: [], //端点的叠加物

//端点的默认样