VueFlow

标签：node vue const nodeId VueFlow position id

Vue3 VueFlow

index.vue

<template>
  <VueFlow @pane-ready="onPaneReady" :nodes="nodes" :edges="edges" :default-viewport="{ zoom: 1 }"
    :nodes-draggable="true" @node-click="onNodeClick" @node-drag-start="onNodeDragStart" @node-drag="onNodeDrag"
    @node-drag-stop="onNodeDragStop" @node-drag-end="handleNodeDragEnd">
    <template #node-teleportable="{ id }">
      <TeleportableNode :id="id" />
    </template>
  </VueFlow>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import TeleportableNode from './TeleportableNode.vue'

const { onPaneReady } = useVueFlow()
const nodes = ref([
  {
    id: 'parent-node',        // 父节点
    label: '节点1',
    type: 'teleportable',
    animated: true,
    position: { x: 870, y: 100 },
    style: { background: 'red', color: '#fff', padding: '10px 20px', borderRadius: '5px', fontSize: '16px' },
  },
  {
    id: 'child-node-1',       // 子节点 1
    label: '节点2',
    type: 'teleportable',
    animated: true,
    position: { x: 109, y: 70 },
    parentNode: 'parent-node', // 关联父节点
    style: { background: 'red', color: '#fff', padding: '10px 20px', borderRadius: '5px', fontSize: '16px' },
  },
])
const edges = ref([
  {
    id: 'edge-1',
    source: 'parent-node',     // 边连接父节点
    target: 'child-node-1',     // 目标为子节点 1
    type: 'teleportable',
    animated: true,            // 默认边类型
    animated: true,
    markerEnd: 'arrow',         // 在连接线末端添加箭头
  },
])

const handleNodeDragEnd = (event, node) => {
  const { id, position } = node
  console.log(`Node ${id} new position:`, position.node)
}
const onNodeClick = (node) => {
  // console.log('node clicked', node)
}
const onNodeDragStart = (nodeId) => {
  // console.log('Dragging started for node:', nodeId)
}

const onNodeDrag = (nodeId, position) => {
  // console.log('Dragging node:', nodeId, 'Position:', position)
}

const onNodeDragStop = (nodeId) => {
  let { x, y } = nodeId.node.position
  console.log('Dragging stopped for node:', x, y)
};

</script>

TeleportableNode.vue

<script setup>
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})
</script>

<script>
export default {
  inheritAttrs: false,
}
</script>

<template>
  <teleport :disabled="!teleport" :to="teleport">

    <div style='border: 1px solid red;'>
      自定义
      {{ id }}
    </div>

  </teleport>
</template>

标签：node,vue,const,nodeId,VueFlow,position,id
From： https://www.cnblogs.com/newBugs/p/18651623