【antv/x6使用笔记】注册并使用vue组件节点

注册并使用vue组件节点

实现步骤

1. 引入 x6 引擎并初始化
2. 安装依赖 pnpm add @antv/x6-vue-shape
3. 创建 vue 组件并使用 register 命名和注册
4. 将注册后的组件节点添加到画布

实现代码如下

import { Graph } from '@antv/x6'
import { register, getTeleport } from '@antv/x6-vue-shape'
import TestNode from '@/components/topo/vue-node/TestNode.vue'

// 初始化 x6
let graph = new Graph({})
// 注册vue组件节点
register({
  shape: 'custom-vue-node',
  width: 100,
  height: 100,
  component: TestNode,
})

// 将节点添加到画布上
graph.addNode({
  shape: 'custom-vue-node',
  x: 100,
  y: 60,
})