【AntV X6 流程图】在elementUI对话框的渲染问题(已解决)

已于 2023-09-15 19:41:10 修改
阅读量487 收藏 2
点赞数
文章标签： elementui 流程图 vue.js
于 2023-05-02 11:51:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiqo/article/details/130462166
版权

昨天做项目时利用AntV X6绘制了流程图，发现不能在elementUI对话框中展示

【对话框代码】
代码

【初始化图的方法以及调用位置】
在这里插入图片描述

【elementUI对话框调不出图来的效果】
在这里插入图片描述
研究一番后发现是初始化图的时机不对，
我们来对比VUE的生命周期
在这里插入图片描述
vue 的生命周期函数—CSDN:Falling snow

留意到我们的图是和页面的元素（DOM）绑定的，所以初始化时机应该是在update()
在这里插入图片描述
在这里插入图片描述

【更改过后的初始化位置】
在这里插入图片描述

【点开对话框就能直接显示图了】
在这里插入图片描述

陈宁宁Ninging
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
「AntV」X6图编辑器的应用——流程图实现
这魏先森-forguo
02-02 1万+
「AntV」X6图编辑器的应用——流程图实现
记录--VUE使用antv X6实现流程图
weixin_41611635的博客
02-21 4005
安装npm install @antv/x6 --save 引入import { Graph, Addon } from "@antv/x6"; 说明：如果没有自定义拖拽到画布的需求引入Graph就行了。 具体说明可查看官网 所有事件 graph.dispose() // 删除画布 graph.model.getNodes() // 获取画布中所有节点数据 graph.model.getEdges() // 获取画布中所有连接线数据 初始化代码： <template> <div
antv x6连接桩hover效果（使用element-plus Tooltip组件实现展示连接桩名字）
最新发布
weixin_67095885的博客
05-21 571
具体实现代码如下,在实例化X6的时候通过onPortRendered这个钩子函数里面使用createVNode去给每一个连接桩节点添加自定义的dom,在结合element UI的组件去使用。2在创建节点的时候，使用 portMarkup: [Markup.getForeignObjectMarkup()]，因为官网的演示案例是react+antd,而我的是vue3+element,实现效果如下图。3在配置连接桩时不要使用circle，要使用fo,具体配置如图。1首先引入需要用到的函数。
(Ant X6)子组件里的流程图画布无法显示
nyf_unknow的博客
11-30 479
在 Vue 中，每个组件都有一个唯一的 key 属性。当组件的 key 属性发生改变时，Vue 会视为这是一个新的组件，而不是复用之前的组件。这样就会触发组件的重新渲染，从而实现页面的刷新。问题背景：侧导航页面都是子组件,建模页面的画布无法显示。解决思路：点击建模菜单时再次加载对应组件。
element ui和antd如何选择
AlgorithmHero的博客
08-17 3681
无论选择哪个组件库，都要确保在使用之前仔细阅读它们的文档，了解其特性、组件和使用方式，以便更好地利用它们来构建优秀的Web应用。： Element UI 是一个专门为 Vue.js 开发的组件库，因此如果你正在使用 Vue.js 构建项目，它可能更适合你。： Ant Design 的设计风格独具一格，有一种独特的“Ant Design 风格”，适合追求不同于传统风格的项目。： Ant Design 是一个专门为 React 开发的组件库，因此如果你的项目使用 React，它可能更适合你。
antv x6踩坑记录二
weixin_43777074的博客
11-19 6104
graph配置panning，会出现一种情况，就是我鼠标点击了画布的某个点，然后滚动滑轮去点击不在当前视图的某个节点的时候，它会自动聚焦到你之前点击的画布的点上 使用fromJSON去序列化节点渲染，在有群组节点的情况下，会出现群组内的节点连线被覆盖的问题，我的处理情况是通过先将节点中的群组节点和子节点区分开来，通过addNodes先将所有的群组节点渲染，然后在渲染子节点和普通节点，最后遍历群组节点，通过addChild的方法把对应的子节点添加到对应的群组节点中，最后才通过addEdges方法渲染连线 关.
在vue3中浅尝antv X6 2.0 demo（三）
m0_65104145的博客
03-31 3782
在vue3中使用antv X6 2.X版本的demo新鲜出炉，内含节点增加、删除、形变、模版导入、导出png、导出json等功能～～～
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
在这个流程图编辑器中，AntV X6可能是核心引擎，负责处理图形渲染、拖拽、连接线动态调整等功能，使用户能够方便地创建和编辑流程图。 项目文件名"v3-antv-x6-demo-main"暗示了这可能是一个包含主入口文件的目录，...
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
05-31
在本项目中，AntV X6被用来实现流程图的绘制和编辑功能。 Vue2.x与Ant Design Vue的结合，使得开发者能够利用Vue的声明式渲染和组件化特性，结合Ant Design Vue的UI组件，快速搭建出用户界面。而AntV X6的引入，则...
antv x6 在vue的使用.pdf
12-16
本篇文章将深入探讨如何在Vue项目中有效地利用AntV X6进行图形渲染和交互。 首先，AntV X6 支持多种前端框架，包括HTML、React、Vue和Angular。这使得开发者可以根据自己的项目需求选择最合适的集成方式。对于Vue...
antv/x6封装vue2.0源码
05-13
《AntV X6 封装 Vue 2.0 源码详解：构建高效图形编辑器的奥秘》 在IT行业中，图形界面与交互设计的重要性...这将对你的职业生涯大有裨益，无论是构建业务流程图、网络拓扑图还是其他类型的图形应用，你都能游刃有余。
React中antv X6 2.0的使用体验（含demo）
m0_65104145的博客
08-15 2965
本次在React中使用antv X6 2.0的功能包括：1、节点右键菜单；2、节点自动布局；3、根据列表动态渲染节点；4、节点之间的连线；5、模版引用时的预览功能；6、使用拖拽组件添加节点（包含2种样式 及群组的添加）；
AntV 开发 —— x6 图编辑引擎
qq_16670995的博客
07-15 968
其实，只是想找个轮子 前序： AntV-官网 x6-官网 x6-人工智能建模 DAG 图 碎碎念： 此文个人笔记，官网文档搬运 因为官网对于vue结合Element-UI的示例就几个，本意只是看中了人工智能建模 DAG 图，但是这玩意demo是React，虽然核心的东西一样，但是傻瓜式才方便，故特意按vue2写了一次，没用ts，用ts的其实转换的成本不高 demo 待上传中【ps：因demo...
vant组件弹出层弹出失效，页面卡死
胡图图的博客
06-15 2040
vant 组件 弹出层失效，页面卡死
antv x6流程图图绘制编辑：初始化配置（一）
热门推荐
香蕉你个芭呐呐的博客
03-04 1万+
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。
antd/x6-graph——实现流程图绘制功能——技能提升
yehaocheng520的博客
04-03 1743
antd/x6-graph——实现流程图绘制功能——技能提升
antv-x6图形化建模（四）antv-x6的Graph对象的配置
weixin_42777968的博客
09-14 1591
this.graphAntv = new Graph({ // 网格 // resizing: true, interacting: ()=>{ // 判断是否支持交互(移动，连线等) if(store.globalModelType){ return { vertexAdd:...
vue使用antv-x6 绘制流程图DAG图（二）
贵林之恋的博客
01-30 1569
【代码】vue使用antv-x6 绘制流程图DAG图（二）
antv x6流程图 vue3
07-28
如果你想在 Vue3 中使用 antv X6 来创建流程图，你可以按照以下步骤来进行： 1. 首先，确保你已经正确安装了 Vue3 和 antv X6 的依赖。你可以通过 npm 或 yarn 进行安装。 2. 创建一个新的 Vue3 项目，并在项目中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值