Vue.js应用程序的简单流程图组件,可视化您的工作流程,任务流程等。
# Yarn
$ yarn add vue-flowy
# NPM
$ npm install vue-flowy --save
1.安装flowy并将其导入到您的项目中。
// 作为一个组件
import {VueFlowy} from 'vue-flowy'
export default {
name: 'App',
components: {
VueFlowy
}
}
// 作为一个插件
import {VueFlowy} from 'vue-flowy'
Vue.component(VueFlowy)
2.该示例可在您的应用上创建基本流程图。
<template>
<div id="app">
<vue-flowy :chart="chart"></vue-flowy>
</div>
</template>
<template>
<div id="app">
<vue-flowy :chart="chart"></vue-flowy>
</div>
</template>
import { VueFlowy, FlowChart } from "vue-flowy";
export default {
name: "App",
components: {
VueFlowy
},
data: function() {
return {
chart: new FlowChart({ direction: "LR" })
};
},
mounted() {
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!");
});
}
};