「AntV」X6 自定义vue节点(vue3)

在Vue 3中使用AntV/X6创建自定义Vue节点，你需要做以下几步：

1. 安装X6库：

npm install @antv/x6

2. 创建自定义节点的Vue组件：

<template>
  <div class="custom-node">
    <h3>{{ label }}</h3>
    <p>{{ info }}</p>
  </div>
</template>
 
<script>
export default {
  props: ['label', 'info'],
};
</script>
 
<style scoped>
.custom-node {
  border: 1px solid #ccc;
  padding: 20px;
  width: 200px;
  text-align: center;
}
</style>

3. 在你的X6图表设置中注册并使用这个Vue节点：

import { Graph } from '@antv/x6';
import { defineComponent, ref } from 'vue';
import CustomNode from './CustomNode.vue'; // 引入自定义节点组件
 
// 注册Vue节点
Graph.registerNode('vue-node', {
  inherit: 'rect',
  vue(node) {
    const render = (h) => h(CustomNode, { props: { label: node.label, info: node.info } });
    return { render };
  }
}, 'shape');
 
export default defineComponent({
  setup() {
    const graph = ref(null);
 
    const initGraph = () => {
      graph.value = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        grid: true,
      });
 
      graph.value.addNode({
        x: 100,
        y: 100,
        width: 200,
        height: 80,
        label: 'Hello',
        info: 'This is a Vue node',
        id: 'node1',
        shape: 'vue-node',
      });
    };
 
    return {
      initGraph,
    };
  },
  mounted() {
    this.initGraph();
  }
});

确保你的Vue 3项目中有一个HTML元素来容纳X6图表，例如：

<div id="container"></div>

这样，你就创建了一个自定义的Vue 3节点，并在X6图表中使用了它。