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

通过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>
    </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>
    {{ nodeInfo?.label }}
    </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>

三、控制台打印信息

相关推荐
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown4 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy4 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip5 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法6 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴7 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰7 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息7 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC7 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi