antv x6自定义节点(使用vue渲染节点)
1、安装@antv/x6-vue-shape# npmnpm install @antv/x6-vue-shape# yarnyarn add @antv/x6-vue-shape# 在 vue2 下还需要安装 @vue/composition-apiyarn add @vue/composition-api --dev主文件引入@antv/x6-vue-shapeimport "@antv/x6
·
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
效果:(数据与后端接口绑定,实际使用需根据需要调整)
更多推荐
已为社区贡献2条内容
所有评论(0)