AntvX6-shape

前言

  在我们实际开发中，有时候需要自定义组件，这时我们就需要使用到 antvx6 的部分插件。今天我们就简单介绍下 @antv/x6-vue-shape。
官网：https://x6.antv.antgroup.com/tutorial/intermediate/vue

引依赖

首先需要在 package.json 中引入依赖，博主使用的是 2.1.1

"@antv/x6-vue-shape": "2.1.1"

代码

1、首先需要新建一个组件 elmNode

<!-- elmNode.vue -->
<template>
  <div class="node-main"></div>
</template>
<script setup lang='ts'>
</script>
<style lang='less' scoped>
.node-main {
  width: 61px;
  height: 92px;
  background-image: url("../../assets/site.svg");
  background-size: 61px 92px;
}
</style>

2、之后在容器中添加组件

<!-- 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",
  });
});
</script>

效果预览

总结：

这只是做一个简单的 demo，后续的位置样式都需要自行设置