vue3和antv g6设计组件

原创 已于 2025-08-13 14:52:07 修改 · 302 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

于 2025-08-13 10:57:58 首次发布

 app.vue

<template>
  <div class="graph-container">
    <div id="graph" style="width: 1000px; height: 600px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import G6 from '@antv/g6';
import DoubleRectNode from './components/DoubleRectNode.vue';
import CenterNode from './components/CenterNode.vue';
import RightRectNode from './components/RightRectNode.vue';

onMounted(() => {
  const graphData = {
    nodes: [
      { id: 'nodeA', label: 'A', subLabel: '1', type: 'double-rect' },
      { id: 'nodeB', label: 'B', subLabel: '2', type: 'double-rect' },
      { id: 'nodeC', label: 'C', subLabel: '3', type: 'double-rect' },
      { id: 'center', label: '进入', type: 'center-node' },
      { id: 'right1', label: '8k', type: 'right-rect' },
      { id: 'right2', label: '8k', type: 'right-rect' },
      { id: 'right3', label: '1k', type: 'right-rect' },
      { id: 'right4', label: '1k', type: 'right-rect' },
      { id: 'right5', label: '1k', type: 'right-rect' },
    ],
    edges: [
      { source: 'nodeA', target: 'center' },
      { source: 'nodeB', target: 'center' },
      { source: 'nodeC', target: 'center' },
      { source: 'center', target: 'right1' },
      { source: 'center', target: 'right2' },
      { source: 'center', target: 'right3' },
      { source: 'center', target: 'right4' },
      { source: 'center', target: 'right5' },
    ],
  };

  // 注册自定义节点渲染器
  G6.registerNode(
    'double-rect',
    {
      draw(cfg, group) {
        const vnode = h(DoubleRectNode, {
          x: 0,
          y: 0,
          label: cfg.label,
          subLabel: cfg.subLabel
        });
        const component = render(vnode, group);
        return group;
      }
    },
    'single-node'
  );

  G6.registerNode(
    'center-node',
    {
      draw(cfg, group) {
        const vnode = h(CenterNode, {
          x: 0,
          y: 0,
          label: cfg.label
        });
        const component = render(vnode, group);
        return group;
      }
    },
    'single-node'
  );

  G6.registerNode(
    'right-rect',
    {
      draw(cfg, group) {
        const vnode = h(RightRectNode, {
          x: 0,
          y: 0,
          label: cfg.label
        });
        const component = render(vnode, group);
        return group;
      }
    },
    'single-node'
  );

  const graph = new G6.TreeGraph({
    container: 'graph',
    width: 1000,
    height: 600,
    layout: {
      type: 'tree',
      direction: 'LR',
      depth: 1,
      nodeSep: 80,
      rankSep: 120,
    },
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
    },
  });

  graph.data(graphData);
  graph.render();

  return () => {
    graph.destroy();
  };
});
</script>

<style scoped>
.graph-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

组件left

<template>
  <g>
    <rect :x="x" :y="y - 25" :width="width" :height="20" :fill="fillTop" :stroke="stroke" :rx="radius" :ry="radius"/>
    <rect :x="x" :y="y + 5" :width="width" :height="20" :fill="fillBottom" :stroke="stroke" :rx="radius" :ry="radius"/>
    <text :x="x + width / 2" :y="y - 15" :fill="textFillTop" :font-size="textSize" :text-anchor="textAnchor">{{ label }}</text>
    <text :x="x + width / 2" :y="y + 15" :fill="textFillBottom" :font-size="textSize" :text-anchor="textAnchor">{{ subLabel }}</text>
  </g>
</template>

<script setup>
const props = defineProps({
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 80
  },
  fillTop: {
    type: String,
    default: '#f5f5f5'
  },
  fillBottom: {
    type: String,
    default: '#fff'
  },
  stroke: {
    type: String,
    default: '#999'
  },
  radius: {
    type: Number,
    default: 2
  },
  label: {
    type: String,
    required: true
  },
  subLabel: {
    type: String,
    required: true
  },
  textFillTop: {
    type: String,
    default: '#333'
  },
  textFillBottom: {
    type: String,
    default: '#666'
  },
  textSize: {
    type: Number,
    default: 12
  },
  textAnchor: {
    type: String,
    default: 'center'
  }
});
</script>

right

<template>
  <g>
    <rect :x="x - 60" :y="y - 10" :width="width" :height="20" :fill="fill" :stroke="stroke" :rx="radius" :ry="radius"/>
    <text :x="x - 50" :y="y + 5" :fill="textFill" :font-size="textSize">{{ label }}</text>
  </g>
</template>

<script setup>
const props = defineProps({
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 120
  },
  fill: {
    type: String,
    default: '#f9f9f9'
  },
  stroke: {
    type: String,
    default: '#999'
  },
  radius: {
    type: Number,
    default: 2
  },
  label: {
    type: String,
    required: true
  },
  textFill: {
    type: String,
    default: '#666'
  },
  textSize: {
    type: Number,
    default: 12
  }
});
</script>

center

<template>
  <g>
    <rect :x="x - 30" :y="y - 15" :width="60" :height="30" :fill="fill" :stroke="stroke" :rx="radius" :ry="radius"/>
    <text :x="x" :y="y + 5" :fill="textFill" :font-size="textSize" :text-anchor="textAnchor">{{ label }}</text>
  </g>
</template>

<script setup>
const props = defineProps({
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  fill: {
    type: String,
    default: '#fff'
  },
  stroke: {
    type: String,
    default: '#000'
  },
  radius: {
    type: Number,
    default: 4
  },
  label: {
    type: String,
    required: true
  },
  textFill: {
    type: String,
    default: '#333'
  },
  textSize: {
    type: Number,
    default: 14
  },
  textAnchor: {
    type: String,
    default: 'center'
  }
});
</script>

容器

<template>
  <div class="graph-container" ref="container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import G6 from '@antv/g6';
import LeftNode from './nodes/LeftNode.vue';
import CenterNode from './nodes/CenterNode.vue';
import RightNode from './nodes/RightNode.vue';

// 接收父组件传入的数据
const props = defineProps({
  nodes: {
    type: Array,
    required: true
  },
  edges: {
    type: Array,
    required: true
  }
});

const container = ref(null);
let graph = null;

// 初始化图表
const initGraph = () => {
  // 销毁现有图表实例
  if (graph) {
    graph.destroy();
  }

  // 注册自定义节点
  G6.registerNode('left-node', {
    draw: LeftNode.draw,
    update: LeftNode.update
  }, 'single-node');

  G6.registerNode('center-node', {
    draw: CenterNode.draw,
    update: CenterNode.update
  }, 'single-node');

  G6.registerNode('right-node', {
    draw: RightNode.draw,
    update: RightNode.update
  }, 'single-node');

  // 创建图表实例
  graph = new G6.Graph({
    container: container.value,
    width: container.value.clientWidth,
    height: container.value.clientHeight,
    layout: {
      type: 'grid',
      cols: 3,
      rowGap: 40,
      colGap: 200,
      sortBy: node => {
        if (node.data.type === 'left') return 1;
        if (node.data.type === 'center') return 2;
        return 3;
      }
    },
    defaultEdge: {
      type: 'line',
      style: {
        stroke: '#999',
        lineWidth: 2,
        endArrow: true
      }
    },
    modes: {
      default: ['drag-node', 'zoom-canvas', 'drag-canvas']
    }
  });

  // 处理节点类型
  const nodesWithType = props.nodes.map(node => {
    let type;
    if (node.type === 'left') type = 'left-node';
    else if (node.type === 'right') type = 'right-node';
    else type = 'center-node';
    return { ...node, type };
  });

  // 加载数据并渲染
  graph.data({
    nodes: nodesWithType,
    edges: props.edges
  });
  graph.render();

  // 添加节点点击事件
  graph.on('node:click', (e) => {
    const node = e.item;
    graph.setItemState(node, 'active', true);
    // 高亮关联边
    graph.getEdges().forEach(edge => {
      const isRelated = edge.getSource().getID() === node.getID() || 
                       edge.getTarget().getID() === node.getID();
      graph.setItemState(edge, 'active', isRelated);
    });
  });

  // 画布点击取消高亮
  graph.on('canvas:click', () => {
    graph.getNodes().forEach(node => graph.setItemState(node, 'active', false));
    graph.getEdges().forEach(edge => graph.setItemState(edge, 'active', false));
  });

  // 高亮样式
  graph.nodeStateStyles.active = {
    shadowBlur: 15,
    shadowColor: 'rgba(0,0,0,0.3)'
  };
  graph.edgeStateStyles.active = {
    stroke: '#fa541c',
    lineWidth: 3
  };
};

// 响应窗口大小变化
const handleResize = () => {
  if (graph) {
    graph.changeSize(
      container.value.clientWidth,
      container.value.clientHeight
    );
  }
};

// 监听数据变化，更新图表
watch([() => props.nodes, () => props.edges], () => {
  if (graph) {
    const nodesWithType = props.nodes.map(node => {
      let type;
      if (node.type === 'left') type = 'left-node';
      else if (node.type === 'right') type = 'right-node';
      else type = 'center-node';
      return { ...node, type };
    });
    
    graph.data({
      nodes: nodesWithType,
      edges: props.edges
    });
    graph.render();
  }
}, { deep: true });

onMounted(() => {
  initGraph();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  if (graph) {
    graph.destroy();
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.graph-container {
  width: 100%;
  height: calc(100% - 60px);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

all

<template>
  <div class="graph-container">
    <!-- G6 挂载容器 -->
    <div id="graph" style="width: 1000px; height: 600px;"></div> 
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import G6 from '@antv/g6';

onMounted(() => {
  // 1. 初始化数据（与手绘结构对应）
  const graphData = {
    nodes: [
      // 左侧节点（A-1、B-2、C-3）
      { id: 'nodeA', label: 'A', subLabel: '1', type: 'double-rect' },
      { id: 'nodeB', label: 'B', subLabel: '2', type: 'double-rect' },
      { id: 'nodeC', label: 'C', subLabel: '3', type: 'double-rect' },
      // 中间核心节点
      { id: 'center', label: '进入', type: 'center-node' },
      // 右侧节点（带 8k/1k 标记）
      { id: 'right1', label: '8k', type: 'right-rect' },
      { id: 'right2', label: '8k', type: 'right-rect' },
      { id: 'right3', label: '1k', type: 'right-rect' },
      { id: 'right4', label: '1k', type: 'right-rect' },
      { id: 'right5', label: '1k', type: 'right-rect' },
    ],
    edges: [
      // 左侧节点连中间
      { source: 'nodeA', target: 'center' },
      { source: 'nodeB', target: 'center' },
      { source: 'nodeC', target: 'center' },
      // 中间连右侧
      { source: 'center', target: 'right1' },
      { source: 'center', target: 'right2' },
      { source: 'center', target: 'right3' },
      { source: 'center', target: 'right4' },
      { source: 'center', target: 'right5' },
    ],
  };

  // 2. 注册自定义节点（左侧双层矩形）
  G6.registerNode(
    'double-rect',
    {
      draw(cfg, group) {
        // 上层矩形
        const rectTop = group.addShape('rect', {
          attrs: {
            x: -40,
            y: -25,
            width: 80,
            height: 20,
            fill: '#f5f5f5',
            stroke: '#999',
            radius: 2,
          },
        });
        // 下层矩形
        const rectBottom = group.addShape('rect', {
          attrs: {
            x: -40,
            y: 5,
            width: 80,
            height: 20,
            fill: '#fff',
            stroke: '#999',
            radius: 2,
          },
        });
        // 上层文字（A/B/C）
        group.addShape('text', {
          attrs: {
            x: 0,
            y: -15,
            text: cfg.label,
            fill: '#333',
            fontSize: 12,
            textAlign: 'center',
          },
        });
        // 下层文字（1/2/3）
        group.addShape('text', {
          attrs: {
            x: 0,
            y: 15,
            text: cfg.subLabel,
            fill: '#666',
            fontSize: 12,
            textAlign: 'center',
          },
        });
        return group;
      },
    },
    'single-node', // 继承基础节点
  );

  // 3. 注册中间核心节点（进入）
  G6.registerNode(
    'center-node',
    {
      draw(cfg, group) {
        const rect = group.addShape('rect', {
          attrs: {
            x: -30,
            y: -15,
            width: 60,
            height: 30,
            fill: '#fff',
            stroke: '#000',
            radius: 4,
          },
        });
        group.addShape('text', {
          attrs: {
            x: 0,
            y: 5,
            text: cfg.label,
            fill: '#333',
            fontSize: 14,
            textAlign: 'center',
          },
        });
        return group;
      },
    },
    'single-node',
  );

  // 4. 注册右侧带长度标记的节点（8k/1k）
  G6.registerNode(
    'right-rect',
    {
      draw(cfg, group) {
        const rect = group.addShape('rect', {
          attrs: {
            x: -60,
            y: -10,
            width: 120, // 长度根据需求调整
            height: 20,
            fill: '#f9f9f9',
            stroke: '#999',
            radius: 2,
          },
        });
        group.addShape('text', {
          attrs: {
            x: -50, // 文字靠左，留空间体现长度
            y: 5,
            text: cfg.label,
            fill: '#666',
            fontSize: 12,
          },
        });
        return group;
      },
    },
    'single-node',
  );

  // 5. 初始化 G6 图实例
  const graph = new G6.TreeGraph({
    container: 'graph',
    width: 1000,
    height: 600,
    // 树布局配置：左侧节点作为根，向右布局
    layout: {
      type: 'tree',
      direction: 'LR', // 从左到右布局
      depth: 1,
      nodeSep: 80, // 节点间距
      rankSep: 120, // 层间距
    },
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 交互模式
    },
  });

  // 6. 加载数据并渲染
  graph.data(graphData);
  graph.render();

  return () => {
    // 组件销毁时销毁图实例
    graph.destroy();
  };
});
</script>

<style scoped>
.graph-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

使用

<template>
  <div class="app-container">
    <h1>算法分类思维导图</h1>
    <G6Mindmap />
  </div>
</template>

<script setup>
import G6Mindmap from './components/G6Mindmap.vue';
</script>

4.225
关注
vue + antV G6 （GraphIn组件） 实现节点badges（徽标/消息通知）
weixin_43319667的博客
12-27 2904
相信大家在用G6的时候，其他功能都实现了，但是需求要在节点上加一些展示东西，这时候你去自定义节点，发现badges（徽标/消息通知）无法实现 实现后的效果图： 在antV官方给出了基于react+G6实现的graphin的react组件，这时候在vue项目中用react组件，实在是有点不太对（能实现但完全不建议） Graphin官网：https://graphin.antv.vision/graphin 可以用react框架先实现图谱功能，然后打包完后，将build文件放到vue项目中的p.
在vue3使用AntV G6 (图可视化引擎)
热门推荐
kiku
12-18 1万+
官网地址： G6 是一个图可视化引擎 一、在项目中使用 NPM 包引入 Step 1: 使用命令行在项目目录下执行以下命令： npm install --save @antv/g6 Step 2: 在需要用的 G6 的 vue 文件中导入： import G6 from '@antv/g6'; 二、绘制案例 Step 1 创建容器 需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。 // 挂载节点
vue3+antV-G6紧凑树，新增删除编辑功能组件记录
m0_60432755的博客
10-09 1283
api 5.x.x版本方法参数。
Vue-G6-Editor终极指南：3步构建专业级流程图应用
最新发布
gitblog_01196的博客
11-13 348
Vue-G6-Editor是一个基于Vue和阿里G6 3.0的模型流程图编辑器，专为需要图形化建模和流程设计的应用场景而生。由于原生G6-Editor不开源且不可商用，这个开源替代品使用ElementUI构建界面，提供了完整的流程图编辑功能，让开发者能够快速集成专业级的可视化编辑能力。 [![流程图编辑器界面](https://raw.gitcode.com/gh_mirrors/vu/vue-
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
vue3中使用antv/G6的ER图
maxlee111的博客
09-08 4480
让你快速的用G6，构建一个ER图。
vue3+antV G6节点与文本框实现
每一篇博客都是对自己技术的沉淀
03-06 1419
const securityId1 = ref(props.securityId) // 证券id。const symbol1 = ref(props.symbol) // 证券代码。const symbol1 = ref(props.symbol) // 证券代码。const datePicker = ref() // 时间筛选框ref。const dateYear = ref<any>('') // 年份。const mapData = ref({}) // 脑图数据。// 控制当前时间之后不能选。
精选资源
vue antv g6 编辑器
09-15
在"vue antv g6 编辑器"项目中，我们可以看到一系列配置文件，这些文件对于优化开发环境、代码质量和构建流程至关重要。下面将详细解释每个文件的作用和在Vue.js项目中的重要性。 1. `.browserslistrc`：这是一个...
精选资源
vue3+antv x6+tsx 制作自定义流程图
09-23
Vue3提供了优秀的组件化开发体验，AntV X6则带来了强大的图形绘制能力，而TSX则保证了代码的类型安全和易于维护。这个组合不仅能够满足基本的流程图需求，还具有高度的可定制性和可扩展性，适合各种复杂场景下的应用...
精选资源
vue3+vite+ts+antv/x6搭建的流程图编辑页面
12-03
这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。 流程图编辑页面是一个专门用于创建、编辑和查看流程图的界面。它通常包括画布、工具栏、属性面板等部分。画布用于展示流程图，并允许用户...
精选资源
【Vue + Antv X6】可拖拽流程图组件
01-11
Antv X6是基于Vue.js的一个开源图形化解决方案，专为复杂图表设计和开发提供支持，其中包含的流程图组件能够帮助开发者在网页上实现图表的绘制和管理功能。 可拖拽流程图组件是Antv X6库中的一部分，该组件使得用户...
Vue3使用G6基础
m0_60394632的博客
11-19 4205
需要用到思维导图，找到蚂蚁金服的G6可以满足需求，不得不说阿里巴巴yyds，这一套图标全家桶可太棒了,熟悉了下基本用法，记录下来,官网讲的就很好了，建议去认真读读手册就会用了,这里总结的更精简和直观，需要的小伙伴可以看看,目前还是一些比较基础的操作，后面用的深入了还会更新
vue3使用AntV G6 (图可视化引擎)历程[一]
在路上`的博客
01-23 3122
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
Vue3项目使用G6可视化组件实现一个树形机构图
都随它大小便吧
10-24 2046
之前一直使用Echarts或Highcharts实现图表，也有听说G2/G6这些玩意，于是在项目中使用看看效果，还不错的样子。
vue3 G6拓扑图 clientWidth scrollHeight 获取容器宽高异常
zbailing的博客
05-21 325
用clientWidth，scrollHeight获取容器宽高，然后配置给g6画布，发现画布出现滚动条。检查后发现，获取到的元素宽高与浏览器控制台中的宽高不一致。
vue3项目使用@antv/g6实现可视化流程功能
幽冥雪羽的博客
06-25 4675
G6实现可视化工作流
G6在vue3项目中使用步骤，g6中er图实例演示，从后端动态渲染真实数据加载
qq_46336539的博客
05-16 5230
vue3项目中使用g6的er图表实例的使用方法，1.每个图的高度根据后端获取数据长度动态赋值 2.点击节点高亮加粗显示 3根据后端返回数据设置每个节点的不同颜色样式 4.从后端获取真实数据渲染页面
vue3中使用Antv G6渲染树形结构并支持节点增删改
前端踩坑之路
07-01 996
在一些管理系统中，会对组织架构、级联数据等做一些管理，你会怎么实现呢？在经过调研很多插件之后决定使用 Antv G6 实现，文档也比较清晰，看看怎么实现吧，先来看看效果图。title: vue3中使用Antv G6渲染树形结构并支持节点增删改。先在项目中安装 antv g6。节点的增加、删除、编辑时间。dom 节点渲染后渲染树图。vue 文件创建容器渲染。渲染方法和初始化树图。
Vue3 使用@antv/g6 流程图编译代码后加载多个dom问题
༺墨༒眉༻
08-24 1284
图表没有在对应的位置展示，打开 Elements发现居然有两个，但是刷新页面就会变成1个，奇怪的是不编译代码直接运行不会出现这种问题。npm run build打包代码后，运行编译后的代码，点击路由跳转到对应页面。在每次初始生成流程图表的时候都清除掉原来的。最后的解决方案是增加了一个判断。
vue3 antv g6 自定义组件注册为自定义节点
04-01
<think>好的，我现在需要帮助用户解决在Vue3中使用AntV G6将自定义组件注册为自定义节点的问题。首先，我要回顾用户提供的引用内容，看看有没有相关的信息可以整合。 用户引用了三个资料：第一个是关于在Vue3中使用G6的示例，其中提到将组件的HTML内容添加到G6节点的DOM形状中。第二个是关于自定义节点的绘制方法，特别是draw函数的用法。第三个是关于如何根据设备类型和状态显示不同图标和背景色的需求，这可能涉及到动态样式处理。 接下来，我需要思考如何在Vue3中实现自定义组件的注册。Vue3和G6的结合使用，可能需要利用Vue的组件系统来生成节点的内容，然后将其嵌入到G6的节点中。根据引用[1]，用户示例中使用了Vue的nextTick来确保DOM更新后获取内容，这可能是一个关键点。 然后，我需要考虑G6的自定义节点机制。根据引用[2]，G6的自定义节点需要定义draw方法，返回一个图形对象。但用户希望使用Vue组件作为节点，这可能涉及到将Vue生成的DOM元素转换为G6可以识别的图形元素，或者使用HTML类型的节点。 接下来，步骤可能包括： 1. 创建Vue组件作为自定义节点的内容。 2. 使用Vue的createApp和mount方法生成DOM元素。 3. 在G6的自定义节点配置中，将生成的DOM元素添加到节点中。 4. 处理动态属性和事件，比如点击高亮，根据引用[3]可能需要监听状态变化并更新样式。 还需要考虑性能问题，频繁创建和挂载Vue实例可能会影响性能，所以是否应该复用实例或者采用其他优化措施。同时，确保在节点销毁时正确卸载Vue组件，避免内存泄漏。 最后，整理这些步骤，形成清晰的教程和示例代码，确保用户能够按照步骤实现。同时，注意用户提到的需要生成相关问题，因此需要准备一些相关问题，比如动态更新节点、性能优化等。</think>### 在 Vue3 中使用 AntV G6 注册自定义组件为节点的实现步骤 #### 一、核心思路 通过 **Vue 动态组件渲染** 和 **G6 自定义节点机制** 结合，将 Vue 组件生成的 DOM 结构注入 G6 节点的 `dom` 形状中[^1][^2]。关键点在于： 1. 使用 `createApp` 动态挂载 Vue 组件 2. 通过 G6 的 `draw` 方法绑定 HTML DOM 结构 3. 实现属性同步和事件监听 #### 二、完整代码示例 ```vue <!-- CustomNodeComponent.vue --> <template> <div :class="[&#39;custom-node&#39;, { &#39;highlight&#39;: selected }]" @click="handleClick"> <img :src="cfg.icon" class="node-icon"> <div class="node-label">{{ cfg.label }}</div> <div class="status-indicator" :style="{ background: cfg.statusColor }"></div> </div> </template> <script setup> defineProps({ cfg: Object, selected: Boolean }); const emit = defineEmits([&#39;nodeClick&#39;]); const handleClick = () => { emit(&#39;nodeClick&#39;); }; </script> <style scoped> .custom-node { position: relative; padding: 8px; border: 2px solid #999; border-radius: 4px; transition: all 0.3s; } .highlight { border-color: #1890ff; box-shadow: 0 0 8px rgba(24,144,255,0.3); } .node-icon { width: 32px; height: 32px; } .status-indicator { position: absolute; right: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; } </style> ``` ```javascript // G6配置 import { createApp } from &#39;vue&#39; import CustomNodeComponent from &#39;./CustomNodeComponent.vue&#39; const registerCustomNode = (G6) => { G6.registerNode(&#39;vue-node&#39;, { draw(cfg, group) { // 创建临时容器 const dom = document.createElement(&#39;div&#39;) const vueApp = createApp(CustomNodeComponent, { cfg, onNodeClick: () => this.handleNodeClick(cfg.id) }) // 挂载Vue组件 const instance = vueApp.mount(dom) // 创建G6 DOM形状 const keyShape = group.addShape(&#39;dom&#39;, { attrs: { x: 0, y: 0, width: 120, height: 60 }, dom: dom.firstChild, // 提取组件DOM // 组件销毁钩子 onRemove: () => vueApp.unmount() }) return keyShape }, // 更新属性 update(cfg, node) { const group = node.getContainer() const shape = group.get(&#39;children&#39;)[0] // 更新Vue组件props shape.dom.__vue_app__.instance.props.cfg = cfg } }) } ``` #### 三、关键实现细节 1. **动态挂载机制**： - 使用 `createApp().mount()` 创建组件实例 - 通过 `dom.firstChild` 提取有效 DOM 结构 - 添加 `onRemove` 钩子自动卸载 Vue 应用 2. **属性同步**： - 通过 `__vue_app__.instance` 访问组件实例 - 直接修改 props 实现动态更新（需配合 watch 监听） 3. **事件穿透**： ```javascript // 在G6图实例中 graph.on(&#39;node:click&#39;, (evt) => { const node = evt.item node.getContainer().get(&#39;children&#39;)[0].dom.__vue_app__.instance.handleClick() }) ``` #### 四、优化建议 1. **复用Vue实例**：使用对象池管理已创建的组件实例 2. **性能监控**：在节点数量超过 500 时启用 WebGL 模式 3. **SSR兼容**：添加 `__isBrowser__` 判断防止服务端渲染报错
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值