vue2使用jsplumb 实现绘制流程图并可进行连线箭头功能和拖拽功能 -Go服务器开发

使用 Vue 2 和 jsPlumb 来实现绘制流程图并具备连线箭头和拖拽功能的基本步骤如下：

1. 安装 jsPlumb

首先，你需要安装 jsplumb。可以通过 npm 或者直接引入 CDN 来使用。

如果使用 npm:

npm install jsplumb --save

如果直接在 HTML 中引入，可以在你的 <head> 部分加入以下 CDN 链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsplumb/2.15.6/jsplumb.min.js"></script>

2. 创建 Vue 组件

创建一个 Vue 组件来实现流程图的绘制，拖拽和连线功能。

<template>
  <div id="container" class="container">
    <div 
      v-for="(item, index) in nodes" 
      :key="index" 
      class="node" 
      :id="'node-' + index"
      @mousedown.prevent="startDrag($event, index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
import { initJsPlumb } from "jsplumb"; // 若你是用 npm 引入的

export default {
  data() {
    return {
      nodes: [
        { label: 'Node 1' },
        { label: 'Node 2' },
        { label: 'Node 3' }
      ],
      isDragging: false,
      dragItemIndex: null,
      offsetX: 0,
      offsetY: 0,
    };
  },
  
  mounted() {
    this.initJsPlumb();
    this.connectNodes();
  },

  methods: {
    initJsPlumb() {
      const instance = jsPlumb.getInstance({
        Container: "container",
        PaintStyle: { strokeWidth: 2, stroke: "#567567" },
        EndpointStyle: { radius: 5, fillStyle:"#567567" }
      });

      // 为每个节点添加连接点
      this.nodes.forEach((_, index) => {
        instance.addEndpoint(`node-${index}`, {
          anchors:["Continuous", "Continuous"],
          isSource:true,
          isTarget:true,
          paintStyle:{ fill:"#567567"},
          connector:[ "Bezier", { curviness:63 }]
        });
        
        // 可调整配置进行更多自定义设置，如连线风格等
        
        // 初始化节点位置（可选）
        instance.draggable(`node-${index}`);
        
        instance.bind("click", function (connection) {
          instance.deleteConnection(connection);
        });
        
        instance.bind("connection", function (connInfo) {
          console.log(connInfo);
          // 在这里可以做一些事情，比如存储连接关系等。
        });
        
       });

       this.jsPlumbInstance = instance;
    },

    connectNodes() {
       // 手动连接节点示例，可根据需求更改逻辑
       this.jsPlumbInstance.connect({ source:"node-0", target:"node-1"});
       this.jsPlumbInstance.connect({ source:"node-1", target:"node-2"});
     },

     startDrag(event, index) {
       this.isDragging = true;
       this.dragItemIndex = index;

       const node = document.getElementById(`node-${index}`);
       
       this.offsetX = event.clientX - node.getBoundingClientRect().left;
       this.offsetY = event.clientY - node.getBoundingClientRect().top;

       document.addEventListener('mousemove', this.onDrag);
       document.addEventListener('mouseup', this.stopDrag);
     },

     onDrag(event) {
       if (!this.isDragging) return;

       const node = document.getElementById(`node-${this.dragItemIndex}`);
       
       node.style.position = 'absolute';
       node.style.left = `${event.clientX - this.offsetX}px`;
       node.style.top = `${event.clientY - this.offsetY}px`;

       // 更新 jsPlumb 的位置
       this.jsPlumbInstance.repaintEverything();
     },

     stopDrag() {
         if (!this.isDragging) return;
         this.isDragging = false;

         document.removeEventListener('mousemove', this.onDrag);
         document.removeEventListener('mouseup', this.stopDrag);
     }
   }
};
</script>

<style scoped>
.container {
   position: relative;
   width: 800px; /* 设置合适的宽度 */
   height: 600px; /* 设置合适的高度 */
   border: solid 1px #ccc;
}

.node {
   width: auto; /* 根据内容自适应 */
   padding:10px;
   background-color:#f8f9fa;
   border-radius:.5rem;
   box-shadow:.1rem .1rem .5rem rgba(0,0,0,.16);
   position:absolute; /* 用于绝对定位 */
}
</style>