1.使用依赖
npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save
下述代码使用Vue2技术栈，若使用Vue3则直接参考「AntV」X6 自定义vue节点(vue3) https://www.yuque.com/sxd_panda/antv/vue-node
2.节点组件
要点：
- 使用
inject注入AntV X6父组件中的依赖getNode；- 使用
this.getNode()可以获取/监听，父组件在节点上配置的数据。
<!-- branch.vue -->
<template><div>{{ name }}</div>
</template>
<script>
export default {inject: ["getNode"],data() {return {name: '',}},mounted() {const node = this.getNode();this.name = node.data.name;// 监听数据node.on('change:data',({current})=>{console.log("监听父组件改变的数据",current)})}
}
</script>
3.父组件（使用节点渲染）
<template><div><div id="container" /></div>
</template>
<script>
// 引入 AntV X6 库
import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'// 引入2中的子组件
import branch from './branch.vue'
// 制作组件节点
register({shape: 'branch-node',width: 100,height: 100,component: branch,
})
export default {mounted() {this.initGraph()},methods: {initGraph() {const width = window.innerWidthconst height = window.innerHeight// 初始化 Graph 对象const graph = new Graph({container: document.getElementById('container'), // 容器元素width: width, // 设置宽度为屏幕宽度height: height, // 设置高度为屏幕高度interacting: {nodeMovable: false, // 可拖拽节点edgeMovable: false // 可拖拽边},connecting: {connectionPoint: 'anchor'// 连接中心锚点}})// 创建组件节点const branchNode = graph.addNode({x: 950,y: 240,shape: 'branch-node',data: {name: '组件节点名称'},})}}
}
</script>
Vue3方法参考：「AntV」X6 自定义vue节点(vue3) https://www.yuque.com/sxd_panda/antv/vue-node
参考地址
1.AntV X6结合Vue组件渲染节点，并与节点组件进行双向的数据交互.
2.Ant X6指南踩坑指南.