介绍
vue-visual-flow
是一个基于 antv/g6
实现的可视化流程配置 Vue
组件
项目使用 rollup
打包,分别提供 cjs
esm
两种模块化引入方式,大小仅为 100K 左右
设计思路
为了尽可能摘除业务逻辑,组件将G6实例、以及当前操作的节点、边实例共享出去,供使用者在外部完成自己的业务逻辑
关于G6 api: G6
部分问题与进度追踪
目前 antv/g6
版本更新后会出现自定义图形消失的问题,暂不支持新版 antv/g6
,追踪issue:g6-issue
issue 已经被修复,请使用 antv/g6@3.7.3
及以上版本
目前不支持同时设置节点配置 tips
和锚点配置 labelName
,会产生无法切换提示信息的问题 g6-issue
demo
个人使用demo
使用
安装
$ npm install @antv/g6 --save
$ npm install vue-visual-flow --save
配置
main.js
import VisualFlow from 'vue-visual-flow';
Vue.use(VisualFlow);
index.vue
<template>
<div id="app">
<visual-flow
:tree-list="treeList"
:tool-list="toolList"
:contextmenu-list="contextmenuList"
:graph.sync="graph"
:current-node.sync="currentNode"
:current-edge.sync="currentEdge"
@contextmenuEvent="contextmenuEvent"
/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
treeList: [
{
label: '一级分类1',
showFlag: false,
children: [
{
label: '二级分类1-1',
showFlag: false,
children: [
{
label: '节点1',
tips: '在这增加一些节点描述信息~',
inPoints: [
{
dataType: 'type1',
labelName: '入锚点类型为type1',
},
{
dataType: 'type2',
labelName: '入锚点类型为type2',
},
],
outPoints: [
{
dataType: 'type1',
labelName: '出锚点类型为type1',
},
],
itemId: 'xxx',
},
],
},
],
},
],
toolList: ['zoomIn', 'zoomOut', 'adjustCanvas', 'realRatio', 'autoFormat', 'fullScreen'],
contextmenuList: {
node: [
{
label: '删除节点',
eventName: 'removeNode',
},
],
edge: [
{
label: '删除边',
eventName: 'removeEdge',
},
],
canvas: [
{
label: '不知道做点啥',
eventName: 'unknow',
},
],
},
graph: {},
currentNode: {},
currentEdge: {},
};
},
methods: {
contextmenuEvent(eventName) {
if (eventName === 'removeNode') {
this.graph.removeItem(this.currentNode);
}
if (eventName === 'removeEdge') {
this.graph.removeItem(this.currentEdge);
}
if (eventName === 'unknow') {
alert('真的啥都没做呢');
}
},
},
};
</script>