vueFlow 流程图组件

引入组件

$ npm i --save @vue-flow/core

$ npm i --save @vue-flow/background

$ npm i --save @vue-flow/controls

$ npm i --save @vue-flow/minimap

组件的使用

<template>
    <VueFlow v-model="el" style="width: fit-view-on-init; height: 800px; width: 1200px" @nodeClick="ndoeClickHandler" @edgeClick="edgeClickHandler" class="basicflow" :snap-to-grid="true" @nodeDragStop="drag" @connect="onConnect">
        <Background patternColor="gray" gap="15" />
        <MinMap />
        <Panel position="top-right">
            <button @click="show">123</button>
        </Panel>
        <template #node-normal="nodeProps">
            <DefaultNode :data="nodeProps.data" :label="nodeProps.label" :nodeProps="nodeProps" :nodeLabel="nodeProps.nodeLabel"></DefaultNode>
        </template>
        <template #node-toolbar="nodeProps">
            <ToolbarNode :data="nodeProps.data" :label="nodeProps.label" :nodeProps="nodeProps" :nodeLabel="nodeProps.nodeLabel"></ToolbarNode>
        <template>
        <template #edge-custom="props">
            <CustomEdge v-bind="props" />
        </template>
    </VueFlow>
</template>

<script>
import { ref, onMounted } from 'vue'
import { VueFlow, useVueFlow, Position, Panel, defaultNodeTypes, MarkerType } from '@vue-flow/core'
import { Background, BackgroundVariant } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MinMap } from '@vue-flow/minmap'
import ToolbarNode from './ToolbarNode.vue'
import CustomEdge from './CustomEdge.vue'
import DefaultNode from './DefaultNode.vue'
export default {
    components: { VueFlow, Background, Controls, MinMap, Position, Panel, ToolbarNode, CustomEdge, DefaultNode },
    setup(props) {
        const el = ref([
            {id:'-1', type: 'input', label: 'input', nodeLabel: '', position: {x: 75, y: 150}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}}, 
            {id:'0', type: 'normal', label: 'Tomqtt', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'1', type: 'normal', label: '转换处理', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'2', type: 'normal', label: 'add attributes', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'3', type: 'normal', label: 'Tomqtt', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'4', type: 'normal', label: '转换处理', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'5', type: 'normal', label: 'IsCompleted', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'6', type: 'normal', label: 'IsCompleted', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'7', type: 'normal', label: '转换处理', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},
            {id:'8', type: 'normal', label: '添加设备id', nodeLabel: '', position: {x: 708, y: 234}, sourcePosition: Position.Right, targetPosition: Position.Left, data: {}},

            {id: 'el--1', source: '-1', target: '8', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-0', type: 'default', label: 'custom edge', data: {text: 'custom edge'}, source: '1', target: '0', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-1', source: '2', target: '1', label: 'Success', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-2', source: '2', target: '4', label: 'Failure', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-3', source: '2', target: '5', label: 'Success', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-4', source: '4', target: '3', label: 'Success', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-5', source: '5', target: '7', label: 'True', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-6', source: '7', target: '6', label: 'Success', marketEnd: MarkerType.ArrowClosed },
            {id: 'el-7', source: '8', target: '2', label: 'Success', marketEnd: MarkerType.ArrowClosed },
        ])

        const nodeClickHandler = (props) => {
            props.node.type = props.node.type === 'toolbar' ? 'normal' : 'toolbar'
        }

        const edgeClickHandler = (props) => {
            props.edge.type = props.edge.type === 'custom' ? 'normal' : 'custom'
        }

        const onConnect = (params) => {
            el.value.push({
                id: 'el-8',
                source: params.source,
                target: params.target,
                markerEnd: MarkerType.ArrowClosed
            })
        }

        const addNode = (node) => {
            el.value.push({
                id: uuidv4(),
                label: '新添加节点',
                type: node.type,
                data: {},
                position: {x: 10, y: 10},
                sourcePosition: node.sourcePosition,
                targetPosition: node.targetPosition,
                style: node.style
            })
        }

        return{
            el,
            nodeClickHandler,
            edgeClickHandler,
            onConnect,
            nodeList,
            addNode
        }    
    }
}
</script>