vue项目中使用jsplumb总结

在Vue项目中使用jsPlumb进行可视化流程图的绘制，你需要先安装jsPlumb库：

npm install jsplumb

然后在你的Vue组件中引入并初始化jsPlumb：

<template>
  <div ref="diagramContainer">
    <!-- 这里将用于显示流程图的容器 -->
  </div>
</template>
 
<script>
import jsPlumb from 'jsplumb';
 
export default {
  name: 'Flowchart',
  data() {
    return {
      jsPlumbInstance: null,
    };
  },
  mounted() {
    this.jsPlumbInstance = jsPlumb.getInstance();
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      // 初始化jsPlumb配置
      this.jsPlumbInstance.setContainer(this.$refs.diagramContainer);
 
      // 配置连线的参数
      const connectorOptions = {
        endpoint: 'Dot',
        paintStyle: {
          stroke: '#1e8151',
          fill: 'transparent',
        },
        hoverPaintStyle: {
          stroke: '#216477',
          fill: 'transparent',
        },
        connectorStyle: {
          stroke: '#1e8151',
          fill: 'transparent',
        },
        connectorHoverStyle: {
          stroke: '#216477',
          fill: 'transparent',
        },
      };
 
      // 添加端点
      this.jsPlumbInstance.addEndpoint('flowchartNode1', {
        anchor: 'BottomCenter',
      }, connectorOptions);
 
      this.jsPlumbInstance.addEndpoint('flowchartNode2', {
        anchor: 'TopCenter',
      }, connectorOptions);
 
      // 连接端点
      this.jsPlumbInstance.connect({
        source: 'flowchartNode1',
        target: 'flowchartNode2',
      });
    },
  },
};
</script>
 
<style>
.flowchartNode1, .flowchartNode2 {
  /* 定义节点的样式 */
  width: 100px;
  height: 40px;
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>

在这个例子中，我们创建了一个Vue组件，该组件在mounted钩子中初始化了jsPlumb实例，并设置了流程图的容器。然后我们定义了连线的参数并添加了两个带有端点的节点，最后我们连接了这两个节点。这样就形成了一个简单的流程图。