Vue-flow示例代码

最新推荐文章于 2024-05-20 17:02:17 发布

夏葵sai

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量71

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Sai_Hikaru/article/details/138579119

版权

import {
    MarkerType
}
from '@vue-flow/core'

export const initialNodes = [{
    id: '1',
    type: 'input',
    label: 'Node 1',
    position: {
        x: 250,
        y: 0
    },
    class: 'light'
},
{
    id: '2',
    type: 'output',
    label: 'Node 2',
    position: {
        x: 100,
        y: 100
    },
    class: 'light'
},
{
    id: '3',
    label: 'Node 3',
    position: {
        x: 400,
        y: 100
    },
    class: 'light'
},
{
    id: '4',
    label: 'Node 4',
    position: {
        x: 150,
        y: 200
    },
    class: 'light'
},
{
    id: '5',
    type: 'output',
    label: 'Node 5',
    position: {
        x: 300,
        y: 300
    },
    class: 'light',
    style: {
        background: 'red',
        border: '1px solid black'
    }
},
]

export const initialEdges = [{
    id: 'e1-2',
    source: '1',
    target: '2',
    animated: true
},
{
    id: 'e1-3',
    label: 'edge with arrowhead',
    source: '1',
    target: '3',
    markerEnd: {
        type: MarkerType.ArrowClosed,
        color: 'red',
    },
    style: {
        stroke: 'red',
        strokeWidth: 1
    },
},
{
    id: 'e4-5',
    type: 'step',
    label: 'step-edge',
    source: '4',
    target: '5',
    style: {
        stroke: 'orange',
        strokeWidth: 3
    },
    labelBgStyle: {
        fill: 'orange'
    },
},
{
    id: 'e3-4',
    type: 'smoothstep',
    label: 'smoothstep-edge',
    source: '3',
    target: '4'
},
]