vue-flow绘制流程图

Vue-Flow 是一个 Vue 组件，用于创建可编辑的流程图和图形编辑器。以下是一个简单的例子，展示如何使用 Vue-Flow 来绘制一个基本的流程图。

首先，确保你已经安装了 Vue-Flow：

npm install @vue-flow/vue-flow

然后，你可以在 Vue 组件中这样使用它：

<template>
  <div id="app">
    <vue-flow :elements="elements" @connect="onConnect" @elements-updated="onElementsUpdated">
      <div slot="background" style="position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: -1;">
        <!-- 背景图片或其他装饰 -->
      </div>
    </vue-flow>
  </div>
</template>
 
<script>
import VueFlow from '@vue-flow/vue-flow'
 
export default {
  components: {
    VueFlow
  },
  data() {
    return {
      elements: [
        { id: '1', type: 'input', position: { x: 250, y: 5 }, data: { label: 'Node 1' } },
        { id: '2', type: 'default', position: { x: 100, y: 100 }, data: { label: 'Node 2' } },
        { id: '3', type: 'output', position: { x: 400, y: 150 }, data: { label: 'Node 3' } },
        // 定义节点间的连线
        { id: 'e1-2', source: '1', target: '2', animated: true },
      ],
    }
  },
  methods: {
    onConnect(params) {
      // 当连线被触发时，你可以在这里处理连线的逻辑
      console.log('handle connect', params);
    },
    onElementsUpdated(elements) {
      this.elements = elements;
    }
  }
}
</script>

在这个例子中，我们定义了三个节点和一条连接它们的线。elements 数组包含了流程图的节点和连线信息。@connect 事件用于处理节点之间连线的逻辑，而 @elements-updated 事件用于同步元素的更新。

这只是一个简单的开始，Vue-Flow 支持更多高级功能，比如节点交互、自定义节点和连线、节点位置自动布局等。你可以查看它的官方文档来了解更多详情。