通过h函数动态展示自定义节点内容
一、案例效果

二、案例代码
-
父组件. BloodTopology.vue
<template><TopologyCompact> <template #main-board-box> <TopologyDependent domId="featureBloodContainer" :nodeData="originalNodeData" /> </template><template #right-drawer-box> <RightDrawer :width="350"> <template #rightContent> rightContent </template> </RightDrawer> </template> </TopologyCompact> </div>
const originalNodeData = ref<any>({
nodes: [],
edges: [],
});const edges = [
['1', '2'],
['2', '3'],
['2', '4'],
['4', '5'],
['4', '6'],
['4', '7'],
['4', '8'],
['5', '9'],
['6', '10'],
['7', '11'],
['8', '12'],
];
const initNodeData = () => {
for (let i = 1; i <= 12; i++) {
originalNodeData.value.nodes!.push({
id:${i}
,
shape: 'vue-shape',
width: 32,
height: 32,
label:我是第${i}个
,
attrs: {
body: {
fill: '#5F95FF',
stroke: 'transparent',
},
label: {
fill: '#ffffff',
},
},
});
}edges.forEach((edge: [string, string]) => { originalNodeData.value.edges!.push({ source: edge[0], target: edge[1], attrs: { line: { stroke: '#A2B1C3', strokeWidth: 2, }, }, }); });
};
onMounted(() => {
initNodeData();
});
</script>h 函数动态渲染内容展示 attrConfig.ts
import NodeElement from '@/views/featureManage/featureList/topologyToolKit/NodeHtml.vue';
import { h } from 'vue';
/**- 自定义注册节点配置
*/
export const registerOption = {
shape: 'vue-shape',
width: 100,
height: 100,
component: ({ node }: { node: any }) => {
// 将 node 数据传递给 NodeElement 组件
return h(NodeElement, { nodeElementItem: node });
},
};
自定义节点内容展示 NodeHtml.vue
<template>{{ nodeInfo?.label }}const props = defineProps({
nodeElementItem: {
type: Object,
required: true,
},
});const nodeInfo = ref();
const handleClick = () => {
console.log('---handleClick');
};const initNodeData = () => {
<style lang="less" scoped> .status-node { height: 50px; width: 100px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #8f8f8fa1; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); z-index: 999; }
nodeInfo.value = props.nodeElementItem.store.data;
console.log(' nodeInfo.value ', nodeInfo.value);
};
onMounted(() => {
initNodeData();
});
</script>.content {
color: #000;
font-size: 14px;
}
</style>三、控制台打印信息