wasn

src/views/test/Test1.vue

@@ -1,20 +1,19 @@
 <template>
 
   <div ref="container" class="container">
-    <Node v-for="(item, index) in details" :key="index" :detail="item" ref="node" />
+    <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.name" />
   </div>
 </template>
 
 <script>
 // import jsPlumb from 'jsplumb'
-import Vue from 'vue'
 import Node from './modules/Node.vue'
-import { ready, newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
+import { newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
 export default {
   components: {
-    Node,
+    Node
   },
-  data() {
+  data () {
     return {
       jsPlumb: null,
       instance: null,
@@ -25,34 +24,34 @@ export default {
           y: 40,
           children: [
             {
-              name: 'node2',
+              name: 'node2'
             },
             {
-              name: 'node3',
-            },
-          ],
+              name: 'node3'
+            }
+          ]
         },
         {
           x: 100,
           y: 320,
           name: 'node2',
-          children: [],
+          children: []
         },
         {
           x: 660,
           y: 320,
           name: 'node3',
-          children: [],
-        },
-      ],
+          children: []
+        }
+      ]
     }
   },
-  mounted() {
+  mounted () {
     this.init()
   },
-  created() {},
+  created () {},
   methods: {
-    init() {
+    init () {
       let { instance } = this
       // 初始化节点
       instance = newInstance({
@@ -60,15 +59,15 @@ export default {
         dragOptions: {
           containment: 'parent',
           containmentPadding: 10,
-          grid: { w: 20, h: 20 },
-        },
+          grid: { w: 20, h: 20 }
+        }
       })
       instance.importDefaults({
         anchor: 'Continuous',
         connectionsDetachable: false,
         // 连接器类型，这里设置为Flowchart
         connector: {
-          type: 'Flowchart',
+          type: 'Flowchart'
         },
         paintStyle: { stroke: '#456', strokeWidth: 3 },
         hoverPaintStyle: { stroke: 'red', strokeWidth: 4 },
@@ -76,35 +75,57 @@ export default {
           {
             type: 'Arrow',
             options: {
-              location: 1,
-            },
-          },
-          {
-            type: 'Custom',
-            options: {
-              create: (component) => {
-                const d = document.createElement('button')
-                d.innerHTML = '+'
-                d.className = 'plus_btn'
-                console.log(d)
-                return d
-              },
-              location: [5, 0],
-              events: {
-                tap: (e, o) => {
-                  console.log('tap', e, o)
-                },
-              },
-            },
-          },
-        ],
+              location: 1
+            }
+          }
+          // {
+          //   type: 'Custom',
+          //   options: {
+          //     create: (component) => {
+          //       const d = document.createElement('button')
+          //       d.innerHTML = '+'
+          //       d.className = 'plus_btn'
+          //       console.log(d)
+          //       return d
+          //     },
+          //     location: [5, 0],
+          //     events: {
+          //       tap: (e, o) => {
+          //         console.log('tap', e, o)
+          //       }
+          //     }
+          //   }
+          // }
+        ]
         // 添加两个标签和箭头
       })
       instance.addSourceSelector('.bottom')
       instance.addTargetSelector('.top')
-      this.$refs.node.forEach((item) => {
-        instance.addEndpoint(item.$el, { target: true, source: true })
+      this.details.forEach(item => {
+        if (item.children.length) {
+          item.children.forEach(children => {
+            instance.connect({
+              // 获取节点1和节点2的引用
+              source: this.$refs[item.name][0].$el,
+              target: this.$refs[children.name][0].$el,
+              // 连接方式，这里设置为连续
+              anchor: 'AutoDefault',
+              // 连接器类型，这里设置为Flowchart
+              connector: 'Flowchart',
+              // 添加两个标签和箭头
+              overlays: [
+                { type: 'Label', options: { label: 'Connection 1', location: 0.5 } },
+                { type: 'Arrow', options: { location: 1 } }
+              ]
+            })
+          })
+        } else {
+          // instance.addEndpoint(this.$refs[item.name][0].$el, { target: false, source: false })
+        }
       })
+      // this.$refs.node.forEach((item) => {
+      //   console.log(item)
+      // })
 
       // 连接三个端点
       // instance.connect({
@@ -145,13 +166,14 @@ export default {
         // 删除连接
         this.$confirm({
           title: '确定删除所点击的链接吗？',
-          onOk() {
+          onOk () {
             instance.deleteConnection(conn)
-          },
+          }
         })
       })
-    },
-  },
+      this.$forceUpdate()
+    }
+  }
 }
 </script>
 

src/views/test/modules/Node.vue

@@ -12,18 +12,18 @@ export default {
   props: {
     detail: {
       type: Object,
-      default: () => {},
-    },
+      default: () => {}
+    }
   },
-  data() {
+  data () {
     return {}
   },
   methods: {
-    setPosition(position) {
+    setPosition (position) {
       this.detail.x = position.x
       this.detail.y = position.y
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -56,4 +56,4 @@ export default {
     height: 10px;
   }
 }
-</style>
+</style>