AntV-X6使用Vue组件作为渲染节点
目录
AntV X6使用Vue组件作为渲染节点
1.使用依赖
npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save下述代码使用Vue2技术栈，若使用Vue3则直接参考
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.innerWidth
const 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方法参考：