vue2 使用jsplumb插件 的完整示例

Vue2 中使用 JsPlumb 进行拖拽连线插件通常需要以下几个步骤：

1. 安装依赖：
首先，在项目中安装 JsPlumb 和 Vue.js，如果你使用的是 `npm`，可以在 `package.json` 中添加：

{
  "dependencies": {
    "vue": "^2.x",
    "jsplumb": "^2.15.x"
  }
}

然后运行 `npm install` 或者 `yarn add`。

2. 引入并注册组件：
在 Vue 组件中，引入 jsPlumb，并在 `<script>` 标签内全局注册它：

<script>
import { use } from 'vue';
import JsPlumb from 'jsplumb';

export default {
  setup() {
    const app = useApp();
    
    // 注册JsPlumb
    if (app.config.globalComponents) {
      app.config.globalComponents.JsPlumb = JsPlumb;
    }

    return {};
  },
  mounted() {
    // 初始化 JsPlumb
    new JsPlumb({
      container: document.getElementById('your-container-id'), // 替换为实际容器元素 ID
      // 其他配置项...
    });
  }
};
</script>

3. 创建节点并连接：
创建节点作为 Vue 组件，每个节点可以有自己的属性表示它的位置、标识等：

<template>
  <div class="node" ref="nodeRef" :style="{left: nodePosition.left, top: nodePosition.top}">
    <div>{{ nodeId }}</div> <!-- 节点内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodeId: 'Node ' + this.$index,
      nodePosition: { left: 0, top: 0 }, // 初始位置
    };
  },
  mounted() {
    // 给节点添加事件监听以便于拖动
    const nodeElement = this.$refs.nodeRef;
    JsPlumb.draggable(nodeElement);
  },
  methods: {
    onDrop(eventData) {
      // 当节点被放置到其他节点时触发，这里处理连接逻辑
    },
  },
};
</script>

4. 实现连接功能：
当你需要让节点之间可以相连时，可以在 `mounted` 生命周期钩子中添加绑定连接的代码，如创建锚点和连线：

mounted() {
  // 添加锚点
  JsPlumb.addAnchors("Flowchart");

  // 创建连线
  this.$ref.nodeRefs.forEach((nodeRef, index) => {
    JsPlumb.makeSource(nodeRef, { anchor: ['Bottom', 'Right'] });
    // 监听其他节点的drop事件，这里仅展示基本示例，根据需求调整
    nodeRef.addEventListener('drop', this.onDrop.bind(null, { sourceId: index }));
  });

  // 链接两个节点
  JsPlumb.connect({源Id: 0, targetId: 1}); // 示例连接第0和第1个节点，根据实际情况替换
}