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

可以通过以下步骤来实现：

1. 安装 vis-network 和 vis-util：

npm install vis-network vis-util --save

2. 在 Vue 组件中引入 vis-network：

import { Network } from 'vis-network/standalone/esm/vis-network'
import 'vis-network/styles/vis-network.min.css'

3. 在 Vue 组件中创建一个容器来放置 vis-network：

<div ref="networkContainer" style="height: 500px;"></div>

4. 在 Vue 组件中初始化 vis-network，并设置节点和边：

mounted() {
  const container = this.$refs.networkContainer
  const data = {
    nodes: [
      { id: 1, label: 'Node 1' },
      { id: 2, label: 'Node 2' },
      { id: 3, label: 'Node 3' }
    ],
    edges: []
  }
  const options = {}
  this.network = new Network(container, data, options)
}

5. 监听节点拖拽事件，获取节点位置：

this.network.on('dragEnd', (event) => {
  const nodeId = event.nodes[0]
  const nodePosition = this.network.getPositions([nodeId])[nodeId]
  console.log(nodePosition)
})

6. 监听边创建事件，获取边的起始节点和结束节点：

this.network.on('beforeDrawing', (ctx) => {
  this.network.getSelectedEdges().forEach(edgeId => {
    const edge = this.network.body.edges[edgeId]
    const fromNode = this.network.body.nodes[edge.from]
    const toNode = this.network.body.nodes[edge.to]
    const fromPosition = fromNode.getCenterPosition()
    const toPosition = toNode.getCenterPosition()
    console.log(fromPosition, toPosition)
  })
})

7. 监听鼠标事件，创建连线：

let fromNodeId = null
this.network.on('click', (event) => {
  if (event.nodes.length > 0) {
    fromNodeId = event.nodes[0]
  }
})
this.network.on('doubleClick', (event) => {
  if (event.nodes.length > 0) {
    const toNodeId = event.nodes[0]
    const edgeId = this.network.addEdge(fromNodeId, toNodeId)
    this.network.selectEdges([edgeId])
    fromNodeId = null
  }
})

这样就可以实现动态拖拽连线了。完整的代码示例可以参考以下链接：

https://codesandbox.io/s/vue-vis-network-dynamic-draggable-edges-7m2yf?file=/src/components/Network.vue