结点名称显隐

src/views/model/vueflow/index.vue

@@ -37,6 +37,7 @@
           <PointOnlyNode
             :node="props"
             :key="props.data.idCodeser || props.id"
+            :showNumber="showNumber"
           />
         </template>
 

src/views/model/vueflow/pointonlynode.vue

@@ -1,16 +1,25 @@
 <script setup>
-import { Handle, Position } from '@vue-flow/core'
+import { Handle, Position } from "@vue-flow/core"
 
 const props = defineProps({
-  node: Object
+  node: {
+    type: Object,
+    required: true
+  },
+  showNumber: {
+    type: Boolean,
+    default: false
+  }
 })
 </script>
 
 <template>
   <div class="point-only-node" :id="`node-${props.node.id}`">
-    <div class="custom-node icons  " :id="`node-${node.id}`"  >
-      <img :src="props.node.data.image"/>
-      <span>{{props.node.data.idCodeser }}</span>
+    <div class="custom-node icons" :id="`node-${node.id}`">
+      <img :src="props.node.data.image" />
+      <span v-show="props.showNumber">
+        {{ props.node.data.idCodeser }}
+      </span>
     </div>
     <!-- 连接点 -->
     <Handle id="source-top" type="source" :position="Position.Top" />
@@ -21,13 +30,13 @@ const props = defineProps({
 </template>
 
 <style scoped>
-.icons img{
-    width: 6px;
-    height: 6px;
-    top: -9px;
-    position: relative;
+.icons img {
+  width: 6px;
+  height: 6px;
+  top: -9px;
+  position: relative;
 }
-.icons span{
+.icons span {
   display: block;
   font-size: 8px;
   top: -8px;
@@ -53,12 +62,10 @@ const props = defineProps({
 .custom-node {
   height: 100%;
 }
-
 </style>
 
 <style>
-.vue-flow__node-point-only.selected{
-  border:1px solid #1a192b;
+.vue-flow__node-point-only.selected {
+  border: 1px solid #1a192b;
 }
-
 </style>