es-web/src/views/model/vueflow/pointonlynode.vue

<script setup>
import { Handle, Position } from '@vue-flow/core'

const props = defineProps({
  node: Object
})
</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>
    <!-- 连接点 -->
    <Handle id="source-top" type="source" :position="Position.Top" />
    <Handle id="source-right" type="source" :position="Position.Right" />
    <Handle id="source-bottom" type="source" :position="Position.Bottom" />
    <Handle id="source-left" type="source" :position="Position.Left" />
  </div>
</template>

<style scoped>
.icons img{
    width: 6px;
    height: 6px;
    top: -7px;
    position: relative;
}
.icons span{
  display: block;
  font-size: 8px;
  top: -8px;
  position: relative;
}

.point-only-node {
  width: 12px;
  height: 12px;
  /* background-color: #555; */
  border-radius: 50%;
  position: relative;
}

.vue-flow__handle {
  width: 3px;
  height: 3px;
  min-width: 0 !important;
  min-height: 0 !important;
  background-color: transparent;
}

.custom-node {
  height: 100%;
}

</style>

<style>
.vue-flow__node-point-only.selected{
  border:1px solid #1a192b;
}

</style>