图表

¥Graph

isEdge

详细信息：
¥Details:
确认元素是否为边。
¥Confirms if an element is an edge.
示例：
¥Example:

vue

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

const elements = ref([
  { id: '1', position: { x: 250, y: 5 }, },
  { id: '2', position: { x: 100, y: 100 }, },

  { id: 'e1-2', source: '1', target: '2', class: 'light' },
])

const toggleClass = () => {
  elements.value.forEach((el) => {
    if (isEdge(el)) {
      el.class = el.class === 'light' ? 'dark' : 'light'
    }
  })
}
</script>

<template>
  

<VueFlow v-model="elements">
    <button @click="toggleClass">Toggle classes</button>
  </VueFlow>


</template>

isNode

详细信息：
¥Details:
确认元素是否为节点。
¥Confirms if an element is a node.
示例：
¥Example:

vue

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

const elements = ref([
  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },

  { id: 'e1-2', source: '1', target: '2' },
])

const toggleClass = () => {
  elements.value.forEach((el) => {
    if (isNode(el)) {
      el.class = el.class === 'light' ? 'dark' : 'light'
    }
  })
}
</script>

<template>
  

<VueFlow v-model="elements">
    <button @click="toggleClass">Toggle classes</button>
  </VueFlow>


</template>

addEdge（已弃用）

¥addEdge (deprecated)

警告

在组合 API 中，你应该使用 addEdges 或 useVueFlow。

¥In the composition API you should use addEdges of useVueFlow

详细信息：
¥Details:
向元素数组添加一条边。
¥Adds an edge to the elements array.
示例：
¥Example:

vue

<script setup>
import { ref } from 'vue'
import { VueFlow, addEdge } from '@vue-flow/core'

const elements = ref([
  { id: '1', position: { x: 250, y: 5 } },
  { id: '2', position: { x: 100, y: 100 } },

  { id: 'e1-2', source: '1', target: '2' },
])

const onConnect = (params) => {
  addEdge(params, elements.value)
}
</script>
<template>
  <VueFlow v-model="elements" @connect="onConnect" />
</template>

updateEdge（已弃用）

¥updateEdge (deprecated)

警告

在组合 API 中，你应该使用 updateEdge 或 useVueFlow。

¥In the composition API you should use updateEdge of useVueFlow

详细信息：
¥Details:
将边更新到新的源节点或目标节点。
¥Updates an edge to a new source or target node.
示例：
¥Example:

vue

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

const elements = ref([
  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },

  { id: 'e1-2', source: '1', target: '2' },
])

const onEdgeUpdate = ({ edge, connection }) => {
  elements.value = updateEdge(edge, connection, elements.value)
}
</script>
<template>
  <VueFlow v-model="elements" @edge-update="onEdgeUpdate" />
</template>