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>

效果