vueflowy流程图

vueflowy流程图

下载

npm install vue-flowy -save

组件

import {VueFlowy} from 'vue-flowy'
 
export default {
  name: 'App',
 
  components: {
    VueFlowy
  }
}

<template>
    <div>
        <VueFlowy :chart="chart"></VueFlowy>
    </div>
</template>
 
<script>
import { VueFlowy, FlowChart } from 'vue-flowy';

export default {
    name: 'cgbusinessProcess',

    components: {
        VueFlowy
    },
    data() {
        return {
            chart: new FlowChart()
        };
    },
    computed: {},
    methods: {
        getMounted() {
            const idea = this.chart.addElement('idea');
            const A = this.chart.addElement('A', { label: 'vscode' });
            const B = this.chart.addElement('B', { label: 'github' });
            const C = this.chart.addElement('C', { label: 'npm' });
            idea.leadsTo(A).leadsTo(B);
            A.leadsTo(C);

            A.on('click', function() {
                console.log('click!');
            });
        }
    },
    mounted() {
        this.getMounted();
    },
    created() {},
    beforeDestroy() {
        this.chart.destroy('idea');
    }
};
</script>

记得清除节点

beforeDestroy() {
        this.chart.destroy('idea');
    }