怎么在vue 中使用jsplumb 实现连线功能,连线之后获取dom

Question

怎么在vue 中使用jsplumb 实现连线功能,连线之后获取dom

Answer 1

【以下回答由 GPT 生成】

解决方案

1. 安装 Vue.js 和 jsPlumb：

使用 Vue CLI 创建一个新的 Vue 项目，安装 Vue.js 和 jsPlumb 的依赖：

```bash # 在全局上安装 Vue CLI npm install -g @vue/cli

# 创建一个新的 Vue 项目 vue create vue-jsplumb-demo

# 进入项目目录 cd vue-jsplumb-demo

# 安装 jsPlumb npm install jsplumb ```

1. 创建一个 Vue 组件用于绘制连线：

创建一个新的 Vue 组件，例如 LineDrawer.vue，并在模板中添加需要绘制连线的 DOM 元素。在 mounted 钩子函数中，使用 jsPlumb 初始化并设置连线。

```vue

Element One

Element Two

Element Three

<script></script> <style> .node { width: 120px; height: 40px; background-color: #eee; border: 1px solid #ccc; margin: 16px; } </style>

```

1. 在父组件中使用 LineDrawer 组件：

在父组件中使用 <line-drawer></line-drawer> 来加载绘制连线的组件。

```vue

Vue jsPlumb Demo

<script></script>

```

1. 运行项目：

运行项目，并在浏览器中查看效果：

bash npm run serve

现在，你应该能够在页面上看到绘制的连线，并能够拖动节点。连线完成后，你可以使用 jsPlumb 的事件监听器来获取对应的 DOM 元素。

javascript instance.bind('connection', (info) => { const sourceElement = info.source const targetElement = info.target console.log('Source Element:', sourceElement) console.log('Target Element:', targetElement) })

注意：上述示例代码只是一个简单的演示，你可能需要根据自己的具体需求进行调整和扩展。

我希望这个解决方案能够对你有所帮助！如果你有任何疑问，请随时问我。

【相关推荐】

• 建议你看下这篇博客👉 ：vue中jsplumb未连线
• 除此之外, 这篇博客: 基于vue和jsplumb的工作流编辑器开发中的 让dom节点变成jsplumb 可拖拽节点 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^