vue 使用vis-network实现动态拖拽连线

可以使用 vis-network 库和 Vue.js 实现动态拖拽连线的功能。

首先，安装 vis-network 和 Vue.js：

npm install vis-network vue --save

然后，在 Vue.js 中引入 vis-network：

import Vue from 'vue'
import Network from 'vis-network/standalone/umd/vis-network.min.js'

Vue.component('network', {
  template: '<div></div>',
  props: ['options', 'data'],
  mounted () {
    const container = this.$el
    const data = this.data
    const options = this.options
    this.network = new Network(container, data, options)
    this.network.on('dragStart', event => {
      // 开始拖拽节点时触发
    })
    this.network.on('dragEnd', event => {
      // 结束拖拽节点时触发
    })
    this.network.on('dragging', event => {
      // 拖拽节点时触发
    })
    this.network.on('selectEdge', event => {
      // 选择连线时触发
    })
    this.network.on('deselectEdge', event => {
      // 取消选择连线时触发
    })
  },
  beforeDestroy () {
    if (this.network !== undefined) {
      this.network.destroy()
      this.network = undefined
    }
  }
})

然后，在 Vue.js 中使用 vis-network：

<template>
  <div id="app">
    <network :data="data" :options="options"></network>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      data: {
        nodes: [
          { id: 1, label: 'Node 1' },
          { id: 2, label: 'Node 2' },
          { id: 3, label: 'Node 3' },
          { id: 4, label: 'Node 4' }
        ],
        edges: [
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 2, to: 4 },
          { from: 3, to: 4 }
        ]
      },
      options: {
        physics: {
          enabled: true,
          barnesHut: {
            gravitationalConstant: -8000,
            springConstant: 0.04,
            springLength: 95
          }
        },
        interaction: {
          dragNodes: true,
          dragView: true,
          multiselect: true,
          selectConnectedEdges: false
        },
        edges: {
          color: '#000000',
          smooth: {
            type: 'cubicBezier',
            forceDirection: 'horizontal',
            roundness: 0.4
          }
        }
      }
    }
  }
}
</script>

在这个例子中，我们定义了一个简单的图形，包含四个节点和四条连线。我们使用 vis-network 的 `physics` 和 `interaction` 选项来启用节点拖拽和选择连线的功能。

在 Vue.js 中，我们使用 `network` 组件来渲染 vis-network 图形，并将数据和选项传递给组件。我们还可以使用事件监听器来处理节点拖拽和选择连线的事件。

以上是基础的 vis-network 连线实现，如果需要动态连线，可以通过监听拖拽事件，在拖拽结束后重新设置节点之间的连线关系。