哪里有学市场营销培训班_自贡普通网站建设费用_免费查权重工具_太原seo软件

通过h函数动态展示自定义节点内容

一、案例效果

二、案例代码

• 父组件. BloodTopology.vue

<template><div><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>
</template><script lang="ts" setup>
import RightDrawer from '@/common/components/topologyToolKit/RightDrawer.vue';
import TopologyCompact from '@/common/components/topologyToolKit/TopologyCompact.vue';
import TopologyDependent from '@/common/components/topologyToolKit/TopologyDependent.vue';
import { onMounted, ref } from 'vue';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><div class="status-node"><div class="content" @click="handleClick">{{ nodeInfo?.label }}</div></div>
</template><script lang="ts" setup>
import { onMounted, ref } from 'vue';const props = defineProps({nodeElementItem: {type: Object,required: true,},
});const nodeInfo = ref();const handleClick = () => {console.log('---handleClick');
};const initNodeData = () => {nodeInfo.value = props.nodeElementItem.store.data;console.log(' nodeInfo.value ', nodeInfo.value);
};
onMounted(() => {initNodeData();
});
</script>
<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;
}.content {color: #000;font-size: 14px;
}
</style>

三、控制台打印信息