Vue.js使⽤AntVX6的⽰例步骤
⽬录
0x0 前⾔
0x1 安装
0x2 节点侧边栏
0x3 整合例⼦
0x0 前⾔
vuejs流程图插件因为项⽬⽤到流程图，并且需求也算是不详细，所以选择⽐较灵活的 x6 图形编辑器作为流程图编辑器，从⽂档来看不算复杂，这边就是作为参考教程。
0x1 安装
根据教程提⽰安装 x6 依赖即可，然后新建个容器进⾏实例化：
<div ref="containerRef" class="area-center-container" />
const data = {
// 节点
nodes: [
{
id: 'node1', // String，可选，节点的唯⼀标识
x: 40,      // Number，必选，节点位置的 x 值
y: 40,      // Number，必选，节点位置的 y 值
width: 80,  // Number，可选，节点⼤⼩的 width 值
height: 40,  // Number，可选，节点⼤⼩的 height 值
label: 'hello', // String，节点标签
},
{
id: 'node2', // String，节点的唯⼀标识
x: 160,      // Number，必选，节点位置的 x 值
y: 180,      // Number，必选，节点位置的 y 值
width: 80,  // Number，可选，节点⼤⼩的 width 值
height: 40,  // Number，可选，节点⼤⼩的 height 值
label: 'world', // String，节点标签
},
],
// 边
edges: [
{
source: 'node1', // String，必须，起始节点 id
target: 'node2', // String，必须，⽬标节点 id
},
],
}
function initGraph() {
const graph = new Graph({
container: this.$ainerRef,
grid: {
size: 10, // ⽹格⼤⼩ 10px
visible: true // 渲染⽹格背景
},
snapline: {
enabled: true, // 对齐线
sharp: true
},
scroller: {
enabled: true,
pageVisible: false,
pageBreak: false,
pannable: true
}
})
// 画布居中
graph.fromJSON(data)
}
就这样最简单例⼦实现了，上⾯不同的参数请参考⽂档对应的解释。
0x2 节点侧边栏
根据⽂档的例⼦，可以简化很多代码量，直接⽤封装好的业务就⾏了，和上⾯⼀样直接写个容器实例化即可：<el-aside ref="stencilRef" class="area-left" />
this.stencil = new Stencil({
title: '流程节点侧边栏',
target: graph,
search: false,
collapsable: true,
stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
groups: [
{
name: 'group',
title: '流程图节点',
collapsable: false
}
]
,
getDropNode: node => {
let cloneNode = node.clone()
switch (node.shape) {
case 'rect':
cloneNode = new RectShape()
break
case 'circle':
cloneNode = new CircleShape()
break
case 'polygon':
cloneNode = new PolylineShape()
break
}
cloneNode.updateInPorts(graph)
return cloneNode
}
})
// 加载节点
this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')
0x3 整合例⼦
以上就是Vue.js 使⽤Antv X6的⽰例步骤的详细内容，更多关于Vue.js 使⽤ Antv X6的资料请关注其它相关⽂章！