1、安装@antv/x6-vue-shape
# npm
npm install @antv/x6-vue-shape
# yarn
yarn add @antv/x6-vue-shape
# 在 vue2 下还需要安装 @vue/composition-api
yarn add @vue/composition-api --dev
主文件引入@antv/x6-vue-shape
import "@antv/x6-vue-shape";
安装并应用该包后,指定节点的shape
为vue-shape
,并通过component
属性来指定渲染节点的 Vue 组件。
2、自定义的节点
<template>
<div class="nodeElement">
<el-image :src="url" class="icon"></el-image>
<div class="notation">
<div class="name">{
{ item.name }}</div>
</div>
</div>
</template>
<script>
export default {
name: "Node",
inject: ["getGraph", "getNode"],
props: {
// item: {},
},
data() {
return {
item: {},
url: require(