1.antv x6 提供了一个独立的包 @antv/x6-vue-shape
来使用 Vue 组件渲染节点。
需要注意的是,x6 的版本要和 x6-vue-shape 的版本匹配,也就是两个包需要用同一个大版本。
npm install @antv/x6-vue-shape --save
2.vue节点组件
<template>
<div class="rounded-corner">
<div class="content">
这是一段文字
</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
.rounded-corner {
background-color: purple;
height: 50px;
width: 100px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.content {
color: white;
font-size: 14px;
}
</style>
2.注册vue节点,并创建流程图数据
<template>
<div id="container"></div>
</template>
<script lang="ts" setup>
import TestNode from './TestNode.vue'
import { onMounted } from 'vue'
import { Graph } from '@antv/x6'
import { register, getTeleport } from '@antv/x6-vue-shape'
// 填充流程图数据,包括节点和边(data=>nodes=>shape表示节点,此处可以使用自定义的vue节点)
const data = {
nodes: [
{
id: 'node1',
shape: 'custom-vue-node',
x: 40,
y: 40,
},
{
id: 'node2',
shape: 'custom-vue-node',
x: 160,
y: 180,
},
],
edges: [
{
shape: 'edge',
source: 'node1',
target: 'node2',
label: 'x6',
attrs: {
// line 是选择器名称,选中的边的 path 元素
line: {
stroke: '#8f8f8f',
strokeWidth: 1,
},
},
},
],
}
onMounted(() => {
// 创建画布
const graph = new Graph({
container: document.getElementById('container') as HTMLElement,
width: 800,
height: 600,
background: {
color: '#F2F7FA',
},
})
// 注册vue组件节点
register({
shape: 'custom-vue-node',
width: 100,
height: 50,
component: TestNode,
})
// 将节点添加到画布上
graph.fromJSON(data) // 渲染元素
graph.centerContent() // 居中显示
})
</script>