vue3使用AntV X6 (图可视化引擎)历程[二]

通过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>

三、控制台打印信息