AntvX6-shape2

前言

使用 shape 插件的时候需要传递数据

代码

1、容器

<!-- container.vue -->
<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { Graph } from "@antv/x6";
import { onMounted } from "vue";
import { register } from "@antv/x6-vue-shape";
import elmNode from "./elmNode.vue";

register({
  shape: "elm-vue-node",
  component: elmNode,
});

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("container"),
    width: "800",
    height: "800",
  });

  graph.addNode({
    shape: "elm-vue-node",
    data: {
      classType: "test", //需要传递到子组件的数据
    },
  });
});
</script>

2、组件

<!-- elmNode.vue -->
<template>
  <div>{{ label }}</div>
  <div class="node-main"></div>
</template>
<script setup lang='ts'>
import { inject, onMounted } from "vue-demi";

const getNode = inject("getNode");	//用来接收容器的数据
let node = getNode();	//组件数据
let data = node.getData();	//传递的数据
let label = data["classType"];
</script>
<style lang='less' scoped>
.node-main {
  width: 61px;
  height: 92px;
  background-image: url("../../assets/site.svg");
  background-size: 61px 92px;
}
</style>

效果