vue使用jsplumb 实现绘制流程图并可进行连接、保存、修改、删除 -DPDK中文网

要在 Vue 中使用 jsPlumb 实现一个可以绘制流程图并支持连接、保存、修改和删除的功能，你可以按照以下步骤进行：

1. 安装 jsPlumb

首先，你需要在你的 Vue 项目中安装 jsPlumb。你可以通过 npm 来安装它：

npm install jsplumb

2. 创建 Vue 组件

接下来，创建一个 Vue 组件来处理流程图的绘制。下面是一个简单的示例：

<template>
  <div id="canvas" ref="canvas" class="flowchart-canvas">
    <div v-for="(item, index) in elements" :key="index" 
         :id="'item-' + index"
         class="element"
         @dblclick="editElement(index)"
         :style="{ top: item.y + 'px', left: item.x + 'px' }">
      {{ item.label }}
      <button @click.stop="deleteElement(index)">Delete</button>
    </div>
    <button @click="addElement">Add Element</button>
  </div>
</template>

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

export default {
  data() {
    return {
      elements: [],
      instance: null,
    };
  },
  
  mounted() {
    this.instance = jsPlumb.getInstance({
      Container: this.$refs.canvas,
    });

    // 可添加连接的逻辑，比如：
    this.instance.bind("connection", (info) => {
      console.log("Connected:", info);
    });
    
    this.initializeJsPlumb();
  },
  
  methods: {
    initializeJsPlumb() {
      this.elements.forEach((el, index) => {
        this.instance.addEndpoint(`item-${index}`, { anchor: "Continuous" }, { isSource: true, isTarget: true });
      });
    },

    addElement() {
      const newElement = { label: `Element ${this.elements.length + 1}`, x: Math.random() * 400, y: Math.random() * 400 };
      this.elements.push(newElement);
      this.$nextTick(() => {
        const index = this.elements.length - 1;
        this.instance.addEndpoint(`item-${index}`, { anchor: "Continuous" }, { isSource: true, isTarget: true });
      });
    },

    editElement(index) {
      const newLabel = prompt("Edit element label:", this.elements[index].label);
      if (newLabel !== null) {
        this.elements[index].label = newLabel;
      }
    },

    deleteElement(index) {
      // 删除连接
      const connectionsToDelete = [...this.instance.getAllConnections()].filter(conn => conn.sourceId === `item-${index}` || conn.targetId === `item-${index}`);
      
      connectionsToDelete.forEach(conn => {
        this.instance.detach(conn);
      });

      // 删除元素
      this.elements.splice(index, 1);
      
       // 更新剩余元素的 endpoint
       setTimeout(this.initializeJsPlumb,0)
       
     }
   }
};
</script>

<style>
.flowchart-canvas {
  position: relative;
  width: 600px;
  height: 400px;
}

.element {
   position:absolute; 
   width:100px; 
   height:auto; 
   border-radius:.5rem; 
   border:.1rem solid #000; 
   background-color:#fff;
   padding:.5rem; 
}
</style>