nz-vue-flow-chart-editor

project_vue_flowchart_editor

A Vue.js project

编码如下

    <FlowchartEditorModal :flowChartData="flowChartData"  />

    import FlowchartEditor from "nz-vue-flow-chart-editor";
 
    const dataNodeItems = [
        {
            shape: 'flow-circle',
            size: '72*72',
            model: {
                label: '开始',
                color: '#FA8C16',
            },
        },
        {
            shape: 'flow-rhombus',
            model: {
                label: '判断条件',
                color: '#13C2C2',
            },
        },
        {
            shape: 'flow-rect',
            model: {
                label: '过程',
            },
        }
    ]
 
    export default {
        name: "FlowchartEditorModal",
        components: {
            FlowchartEditor
        },
        data() {
            return {
            readOnly: false,
            reRender: +new Date(),
            flowChartData: {},
            flowChartNodeItems: dataNodeItems
            };
        },
 
        methods: {
            save(data) {
            // 在这里写数据保存逻辑
            console.log("save data");
 
            console.log(JSON.stringify(data));
            // this.flowChartData = cloneDeep(data);
            }
        }
    };
 

效果图