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("../../assets/icons/x6.png"), }; }, mounted() { const node = this.getNode(); const { item } = node.getData(); this.item = item; // 监听数据改变事件 node.on("change:data", ({ current }) => { console.log("----,", current); }); }, methods: {}, }; </script> <style lang="scss" scoped> .nodeElement { display: flex; align-items: center; box-sizing: border-box; width: 200px; height: 32px; overflow: hidden; background-color: #fff; border-radius: 4px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08); .icon { display: inline-flex; flex-grow: 0; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: rgba(229, 238, 255, 0.85); border-radius: 4px 0 0 4px; } .notation { display: inline-flex; align-items: center; width: 166px; padding: 0 9px; user-select: none; & > * { flex-grow: 1; } .name { overflow-x: hidden; color: rgba(0, 0, 0, 0.65); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } .statusIcon { display: inline-flex; flex-grow: 0; align-items: center; font-size: 14px; transform: translateZ(0); } } } </style>

?3、注册节点并进行渲染

Graph.registerVueComponent( "img-node", { template: `<Node />`, components: { Node, }, }, true );

注意：Node为自定义的节点组件，img-node是注册的节点名。

定义节点属性参数：

let shape = { // inherit: "react-shape", shape: "vue-shape", width: 200, height: 32, component: "img-node", shape.label：'test采集任务04', data: { item: this.collectTaskItem, }, attrs: { body: { rx: 4, // 圆角矩形 ry: 4, strokeWidth: 0.4, stroke: "white", fill: "white", }, }, ports: ports, }; // 挂载至组件库 "group1"指组件库group1 this.stencil.load(shape, "group1");

渲染结果：

完整文件（只涉及该功能，不是一个完整的项目）

链接：https://download.csdn.net/download/dmr123456/57054139

效果：（数据与后端接口绑定，实际使用需根据需要调整）

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。