ZBLOG

vue2使用jsplumb 实现绘制流程图并可进行连线箭头功能和拖拽功能

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

1. 安装 jsPlumb

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

如果使用 npm:

  1. npm install jsplumb --save

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

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

2. 创建 Vue 组件

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

  1. <template>
  2. <div id="container" class="container">
  3. <div
  4. v-for="(item, index) in nodes"
  5. :key="index"
  6. class="node"
  7. :id="'node-' + index"
  8. @mousedown.prevent="startDrag($event, index)"
  9. >
  10. {{ item.label }}
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. import { initJsPlumb } from "jsplumb"; // 若你是用 npm 引入的
  16. export default {
  17. data() {
  18. return {
  19. nodes: [
  20. { label: 'Node 1' },
  21. { label: 'Node 2' },
  22. { label: 'Node 3' }
  23. ],
  24. isDragging: false,
  25. dragItemIndex: null,
  26. offsetX: 0,
  27. offsetY: 0,
  28. };
  29. },
  30. mounted() {
  31. this.initJsPlumb();
  32. this.connectNodes();
  33. },
  34. methods: {
  35. initJsPlumb() {
  36. const instance = jsPlumb.getInstance({
  37. Container: "container",
  38. PaintStyle: { strokeWidth: 2, stroke: "#567567" },
  39. EndpointStyle: { radius: 5, fillStyle:"#567567" }
  40. });
  41. // 为每个节点添加连接点
  42. this.nodes.forEach((_, index) => {
  43. instance.addEndpoint(`node-${index}`, {
  44. anchors:["Continuous", "Continuous"],
  45. isSource:true,
  46. isTarget:true,
  47. paintStyle:{ fill:"#567567"},
  48. connector:[ "Bezier", { curviness:63 }]
  49. });
  50. // 可调整配置进行更多自定义设置,如连线风格等
  51. // 初始化节点位置(可选)
  52. instance.draggable(`node-${index}`);
  53. instance.bind("click", function (connection) {
  54. instance.deleteConnection(connection);
  55. });
  56. instance.bind("connection", function (connInfo) {
  57. console.log(connInfo);
  58. // 在这里可以做一些事情,比如存储连接关系等。
  59. });
  60. });
  61. this.jsPlumbInstance = instance;
  62. },
  63. connectNodes() {
  64. // 手动连接节点示例,可根据需求更改逻辑
  65. this.jsPlumbInstance.connect({ source:"node-0", target:"node-1"});
  66. this.jsPlumbInstance.connect({ source:"node-1", target:"node-2"});
  67. },
  68. startDrag(event, index) {
  69. this.isDragging = true;
  70. this.dragItemIndex = index;
  71. const node = document.getElementById(`node-${index}`);
  72. this.offsetX = event.clientX - node.getBoundingClientRect().left;
  73. this.offsetY = event.clientY - node.getBoundingClientRect().top;
  74. document.addEventListener('mousemove', this.onDrag);
  75. document.addEventListener('mouseup', this.stopDrag);
  76. },
  77. onDrag(event) {
  78. if (!this.isDragging) return;
  79. const node = document.getElementById(`node-${this.dragItemIndex}`);
  80. node.style.position = 'absolute';
  81. node.style.left = `${event.clientX - this.offsetX}px`;
  82. node.style.top = `${event.clientY - this.offsetY}px`;
  83. // 更新 jsPlumb 的位置
  84. this.jsPlumbInstance.repaintEverything();
  85. },
  86. stopDrag() {
  87. if (!this.isDragging) return;
  88. this.isDragging = false;
  89. document.removeEventListener('mousemove', this.onDrag);
  90. document.removeEventListener('mouseup', this.stopDrag);
  91. }
  92. }
  93. };
  94. </script>
  95. <style scoped>
  96. .container {
  97. position: relative;
  98. width: 800px; /* 设置合适的宽度 */
  99. height: 600px; /* 设置合适的高度 */
  100. border: solid 1px #ccc;
  101. }
  102. .node {
  103. width: auto; /* 根据内容自适应 */
  104. padding:10px;
  105. background-color:#f8f9fa;
  106. border-radius:.5rem;
  107. box-shadow:.1rem .1rem .5rem rgba(0,0,0,.16);
  108. position:absolute; /* 用于绝对定位 */
  109. }
  110. </style>

总结

以上代码展示了如何在 Vue 中结合 jsPlumb 实现简单的流程图,包括节点创建、拖拽和连接功能。你可以根据自己的需求进一步扩展和定制,例如增加保存功能、编辑节点信息等。

确保您已经正确安装并引入了所需库,并针对具体需求调整样式及事件处理程序。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19473

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?