显示路径长度

src/App.vue

@@ -18,10 +18,14 @@
       class="form2"
       label-position="top"
     >
-      <el-form-item label="路径1数据(必填)(在全部节点中的index，以英文逗号分隔)(浅蓝色大圆圈表示)">
+      <el-form-item
+        :label="`路径1数据(必填)(节点index，以英文逗号分隔)(浅蓝色大圆圈表示)（路径长度：${path1Length}）`"
+      >
         <el-input v-model="formData.path1" />
       </el-form-item>
-      <el-form-item label="路径2数据（选填）(在全部节点中的index，以英文逗号分隔)（深蓝色小圆圈表示）">
+      <el-form-item
+        :label="`路径2数据（选填）(节点index，以英文逗号分隔)（深蓝色小圆圈表示）(路径长度：${path2Length})`"
+      >
         <el-input v-model="formData.path2" />
       </el-form-item>
       <el-button
@@ -139,6 +143,12 @@ export default {
     }
   },
   computed: {
+    path1Length() {
+      return this.getInputPathLength(this.formData.path1)
+    },
+    path2Length() {
+      return this.getInputPathLength(this.formData.path2)
+    },
   },
   mounted() {
     svgNode = d3.select('.svgWrapper').append("svg")
@@ -148,6 +158,37 @@ export default {
     // this.getWholeData()
   },
   methods: {
+    getInputPathLength(input) {
+      let temp = input.trim()
+      if(temp[0] === '[') { temp = temp.substr(1)}
+      if (temp[temp.length - 1] === ']') { temp = temp.substr(0, temp.length - 1) }
+      temp = temp.trim()
+      if (!temp) {
+        return 0
+      }
+      let mapSuccess = true
+      temp = temp.split(',').map((item) => {
+        item = item.trim()
+        if (!item) {
+          return undefined
+        } else {
+          const num = Number(item)
+          if (!Number.isSafeInteger(num)) {
+            mapSuccess = false
+            return undefined
+          } else {
+            return num
+          }
+        }
+      })
+      if (!mapSuccess) {
+        return '?'
+      } else {
+        return temp.filter((item) => {
+          return item !== undefined
+        }).length
+      }
+    },
     inputPathStringToArray(input) {
       let temp = input.trim()
       if(temp[0] === '[') { temp = temp.substr(1)}