antv g6 禁止移动_antV G6流程图在Vue中的使用

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~

更新内容

最新版本

2.x版本后,可以通过npm install直接安装使用了

最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntV G6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编辑器尽早开源，在交互方面1.2.8版本还是差了一些。

该组件并非开箱即食，需要根据自己的业务进行修改，右侧属性表单部分如果有时间考虑改为插槽形式，方便以后复用~

技术栈

Vue v2.0.1

Sass

效果图

引入

在index.html中进行了全局引用

实例代码

仿照2.0版本的编辑器将G6作为了一个组件使用，代码：

{ {infoTitle}}属性

网格对齐

v-for="item in actionList"

:key="item.id"

:label="item.label"

:value="item.id">

v-for="item in funcList"

:key="item.id"

:label="item.label"

:value="item.id">

collapse-tags placeholder="绑定账号" value="">

v-for="item in accountList"

:key="item.id"

:label="item.label"

:value="item.id">

v-for="item in workflowList"

:key="item.id"

:label="item.label"

:value="item.id">

v-for="item in nodeTypeList"

:key="item.id"

:label="item.label"

:value="item.id">

export default {

name: "index",

components: {},

mounted() {

this.initG6();

},

props: {

actionList: {

type: Array, default: []

},

funcList: {

type: Array, default: []

},

accountList: {

type: Array, default: []

},

workflowList: {

type: Array, default: []

},

nodeTypeList: {

type: Array, default: () => {

return [

{id: 0, label: '普通节点'},

{id: 1, label: '入口节点'},

{id: 2, label: '出口节点'}

]

}

}

},

data() {

return {