vue2 + jsplumb 实现点击添加连线

实现点击添加连线的功能，可以分为以下几个步骤：

1. 安装 jsplumb 和 vue2 的依赖库，可以使用 npm 或者 yarn 安装。

2. 在 vue2 组件的 mounted 钩子函数中，初始化 jsplumb 实例。

3. 在模板中定义需要连接的元素，通过 ref 获取元素的 DOM 节点，并设置唯一的 id。

4. 在 jsplumb 实例中，通过 makeSource 和 makeTarget 方法将元素设置为源和目标，使它们具有可连接的属性。

5. 在模板中定义连接按钮，通过点击事件触发连接函数。

6. 在连接函数中，通过 connect 方法连接源和目标元素，并设置连接线的样式和标签。

下面是一个示例代码片段，可以作为实现的参考：

<template>
  <div>
    <div ref="source" id="source">source</div>
    <div ref="target" id="target">target</div>
    <button @click="connect">connect</button>
  </div>
</template>

<script>
import jsPlumb from 'jsplumb'

export default {
  mounted() {
    this.jsPlumbInstance = jsPlumb.getInstance()

    this.jsPlumbInstance.makeSource(this.$refs.source, {
      endpoint: 'Dot',
      isSource: true,
      connector: ['Flowchart', { stub: [40, 60], gap: 10 }],
      anchor: 'Bottom',
      connectorStyle: { stroke: '#5c96bc', strokeWidth: 2 },
      hoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 },
      connectorHoverStyle: { strokeWidth: 3 }
    })

    this.jsPlumbInstance.makeTarget(this.$refs.target, {
      endpoint: 'Dot',
      isTarget: true,
      connector: ['Flowchart', { stub: [40, 60], gap: 10 }],
      anchor: 'Top',
      connectorStyle: { stroke: '#5c96bc', strokeWidth: 2 },
      hoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 },
      connectorHoverStyle: { strokeWidth: 3 }
    })
  },
  methods: {
    connect() {
      this.jsPlumbInstance.connect({
        source: this.$refs.source,
        target: this.$refs.target,
        endpoint: 'Dot',
        connector: ['Flowchart', { stub: [40, 60], gap: 10 }],
        anchor: ['Bottom', 'Top'],
        paintStyle: { stroke: '#5c96bc', strokeWidth: 2 },
        hoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 },
        overlays: [['Label', { label: 'connection', location: 0.5, id: 'label' }]],
        connectorHoverStyle: { strokeWidth: 3 }
      })
    }
  }
}
</script>