vue点击添加生成流程图-DPDK中文网

在 Vue 中实现点击添加生成流程图的功能，可以使用一些可视化库，例如 jsPlumb, go.js, 或者 d3.js 等。以下是一个简单的示例，演示如何在 Vue 应用中使用 jsPlumb 创建基本的流程图。

安装 jsPlumb

首先，确保你已经安装了 jsPlumb。在你的项目目录下运行：

npm install jsplumb --save

创建 Vue 组件

下面是一个简单的 Vue 组件示例，展示如何使用 jsPlumb 创建流程图。

<template>
  <div id="app">
    <button @click="addNode">添加节点</button>
    <div id="flowchart" style="position: relative; width: 100%; height: 400px; border: 1px solid #ccc;">
      <div v-for="(node, index) in nodes" :key="index" :id="'node-' + index" class="node"
           :style="{ left: node.x + 'px', top: node.y + 'px' }">
        {{ node.label }}
      </div>
    </div>
  </div>
</template>

<script>
import { useJsPlumb } from "jsplumb";

export default {
  data() {
    return {
      nodes: [],
      nextNodeId: 0,
      instance: null,
    };
  },
  
  methods: {
    addNode() {
      const newNode = { 
        label: `节点 ${this.nextNodeId}`, 
        x: Math.random() * (400 - 50), // 随机位置
        y: Math.random() * (400 - 50)
      };
      
      this.nodes.push(newNode);
      this.nextNodeId++;

      if (this.instance) {
        this.instance.addEndpoint(`node-${this.nodes.length - 1}`, { anchors:["Top", "Bottom"], isSource:true, isTarget:true });
      }
    }
    
    initJsPlumb() {
      this.instance = useJsPlumb();
      
      // 初始化 endpoint 和 connection 的样式
      this.instance.bind("ready", () => {
        this.nodes.forEach((_, index) => {
          this.instance.addEndpoint(`node-${index}`, { anchors:["Top", "Bottom"], isSource:true, isTarget:true });
        });
        
        // 在这里可以设置其他连接和样式
      });
    }
  },
  
  mounted() {
    this.initJsPlumb();
  }
};
</script>

<style>
.node {
   position: absolute;
   width: 80px;
   height: 40px;
   background-color: lightblue;
   border-radius: 5px;
   text-align: center;
   line-height: 40px;
}
</style>

示例说明

HTML 部分：有一个按钮用于添加节点，一个 div 用于显示流程图。
Vue 数据：维护了一个 nodes 数组来存储所有的节点。
方法：
- addNode 方法用于添加新节点，并为其创建端点，以便后续连接。
- initJsPlumb 方法初始化 jsPlumb 实例并配置端点。