vue2引入工作流(logic-flow)

1 安装

npm install @logicflow/core
npm install @logicflow/extension

2 引入+使用

<template>
    <el-container>
        <div class="container" ref="container"></div>
    </el-container>
</template>

<script>
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

export default {
    data() {
        return {
            graphData: {
                nodes: [
                    {
                        id: '1',
                        type: 'circle',
                        x: 100,
                        y: 100,
                    },
                    {
                        id: '2',
                        type: 'rect',
                        x: 300,
                        y: 100,
                    },
                ],
                edges: [
                    {
                        sourceNodeId: '1',
                        targetNodeId: '2',
                        type: 'polyline',
                    },
                ],
            },
        };
    },
    methods: {},
    mounted() {
        this.lf = new LogicFlow({
            container: this.$refs.container,
            grid: true,
        });
        this.lf.render(this.graphData);
    },
};
</script>

<style>
.container {
    width: 1000px;
    height: 500px;
}
</style>