使用@antv/x6-vue-shape 遇到的问题

已于 2024-08-29 17:23:12 修改
阅读量2.2k 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-08-18 13:45:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyg1515330502/article/details/132359004
版权
作者在使用@antv/x6开发时遇到各种问题，涉及vue版本升级、@vue/composition-api和vue-demi的版本冲突，以及官方包更新导致的目录结构变化。通过清理缓存、调整依赖和更新包版本解决了这些问题。
摘要由CSDN通过智能技术生成

最近用@antv/x6开发一个功能，遇到的坑太多了，心累啊。。。

想用官方提供的@antv/x6-vue-shape  ，目的是使用vue组件创建画布元素。

官方文档：

 链接：使用 HTML/React/Vue/Angular 渲染 | X6

使用npm install 安装 报错：

package.json: 

vue 用的是2.7.8 的版本

刚开始报错：

因为@vue/composition-api  需要的vue版本在vue@">= 2.5 < 2.7，

@vue/composition-api 建议使用版本："@vue/composition-api": &#

最低0.47元/天 解锁文章
小贵子的博客
关注
@antv/x6、@antv/x6-vue-shape X6 图编辑引擎在 vue 中实践
南七小僧的学海无涯
05-28 793
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
「AntV」X6 自定义vue节点(vue3)
qq22885633008的博客
06-03 1227
vue节点内部有一个复选框，用于勾选节点，选中后要给当前节点添加一个是否选中的属性，由于节点的数据更新只能在父页面进行更新，所以必须得把复选框绑定的值传递给父页面。事件的时候不能触发vue节点的点击事件，也就是两边的事件都是独立的，谁也不能影响谁，而且vue节点内的点击事件在点击的时候还得获取当前节点信息。采用群里小伙伴的方案，阻止节点鼠标按下或者鼠标抬起的事件，这样可以实现在点击vue节点的时候不触发节点本身的。事件，虽然可以实现阻止的功能，但是不好操作节点的数据，我是需要获取当前节点的数据的。
VUE+antv/x6实现拖拽自定义流程图
热门推荐
wang_zhiwei0728的博客
10-26 1万+
最近公司需要做一个流程图， 看了看antv/X6感觉挺合适，就研究了半个月。 网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。 一：实现流程图最重要得就是画布了，官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。 首先最重要得就是下载依赖了， x6在vue中下载得话需要下载两个依赖； npm install @antv/x6 --save npm install @antv/x6-vue-shape 把这两个依赖下载好就可以在vue中使用X6了
antv x6自定义节点(使用vue渲染节点）
web18296061989的博客
03-05 8279
1、安装@antv/x6-vue-shape # npm npm install @antv/x6-vue-shape # yarn yarn add @antv/x6-vue-shape # 在 vue2 下还需要安装 @vue/composition-api yarn add @vue/composition-api --dev 主文件引入@antv/x6-vue-shape import "@antv/x6-vue-shape"; 安装并应用该包后，指定节点的shape为vue-shape，并
antv/x6使用vue组件渲染节点
weixin_43472754的博客
08-22 570
需要注意的是，x6 的版本要和 x6-vue-shape 的版本匹配，也就是两个包需要用同一个大版本。1.antv x6 提供了一个独立的包。2.注册vue节点，并创建流程图数据。来使用 Vue 组件渲染节点。
安装x6-vue-shape后会报错
kiku
02-15 5224
vite项目下，安装引入@antv/x6-vue-shape会报错 只安装@antv/x6正常，安装x6-vue-shape后会报错 1、安装@antv/x6-vue-shape 2、import { Graph } from “@antv/x6”; 3、报错button.ts:10 Uncaught TypeError: Cannot read properties of undefined (reading 'ToolItem')； 版本 "@antv/x6": "^1.30.0", "@antv/x6
使用antv x6注册vue组件报错，TypeError: Object(...) is not a function (teleport.js:3:23)
lingliu0824的博客
10-26 741
即模块会使用全局引入的vue，问题就出在全局引入的vue是2.6.14版本，但是模块中使用的是2.7.10的版本。vu-demi安装时是和模块的vue版本对应的，固出现了vue-demi版本和项目实际使用版本不一致的情况。由于项目在index.html中通过本地引入的方式引入了vue.min.js（2.6.14），然后在模块下使用了配置。解决：将全局版本和模块package.json中定义的版本保持一致。点击定位到报错的位置为。
AntV X6结合Vue组件渲染节点，并与节点组件进行双向的数据交互
南七小僧的学海无涯
05-28 3149
项目使用.0 + Element-ui 框架，在开发流程功能时自定义节点，为实现稍复杂的样式以及操作交互，使用 markup + attrs的方式的话，比较麻烦，且难以结合使用 Element-ui的交互组件，因此换成结合 Vue组件渲染方式注册自定义节点（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）
AntvX6 使用vue节点的数据回显问题
weixin_46038596的博客
09-08 1043
2.通过节点id 来回显数据 注意两种data的写法。1.在vue节点中需要设置数据监听事件。
antv/x6封装vue2.0源码
05-13
“vue-x6-flow-master” 文件夹中包含的源码展示了如何在 Vue 项目中引入和使用 AntV X6。主要文件可能包括 `main.js`（入口文件，配置 Vue 应用和 X6）、`App.vue`（应用的根组件，包含图形编辑器的基本结构）以及...
vue-shape.rar
02-05
X6 Vue Shape则是AntV X6与Vue.js结合的插件，方便开发者在Vue项目中使用X6的图形能力。 在“x6-vue-shape在（antv-x6+vue2+js）中的使用”这个主题中，我们将深入探讨如何将X6的图形功能集成到Vue 2.x项目中，并...
antv/x6+antv/x6-vue-shape+vite+vue3 打包踩坑记录
weixin_43969709的博客
07-18 4708
antv/x6+antv/x6-vue-shape+vite打包后生产环境报错解决方法有以下4种...
Vue2项目 使用AntV X6 实现拖拽，自定义组件，数据重渲染，连线自定义等功能
最新发布
Hash9909的博客
08-22 833
@antv/x6 拓扑图的功能，能够实现拖拽，组件自定义，弹窗提示，自动连线区分状态，数据保存重新渲染，状态更新等功能
AntV 开发 —— x6 图编辑引擎
qq_16670995的博客
07-15 1034
其实，只是想找个轮子 前序： AntV-官网 x6-官网 x6-人工智能建模 DAG 图 碎碎念： 此文个人笔记，官网文档搬运 因为官网对于vue结合Element-UI的示例就几个，本意只是看中了人工智能建模 DAG 图，但是这玩意demo是React，虽然核心的东西一样，但是傻瓜式才方便，故特意按vue2写了一次，没用ts，用ts的其实转换的成本不高 demo 待上传中【ps：因demo...
vue3 vite项目中使用antv x6 报错 Cannot read property ‘ToolItem‘ of undefined
m0_64780137的博客
05-15 310
vue3 vite项目中使用antv x6 报错 Cannot read property 'ToolItem' of undefined
vue使用antv-x6 绘制流程图DAG图（二）
贵林之恋的博客
01-30 1918
【代码】vue使用antv-x6 绘制流程图DAG图（二）
void run(FCFS &node) { node.finishtime = max(nowtime,node.arrivetime)+node.servicetime; node.aroundtime = node.finishtime - node.arrivetime; node.weight_aroundtime = node.aroundtime/node.servicetime; nowtime = node.finishtime; }有什么问题吗
05-25
这段代码看起来是计算作业调度中的先来先服务（FCFS）算法的完成时间、周转时间和带权周转时间。不过需要注意以下几点： 1. `nowtime` 的初始值应该在函数外部初始化，否则第一个作业的 `max(nowtime,node.arrivetime)` 的计算结果可能是错误的。 2. 对于 FCFS 算法，当前作业的完成时间应该是上一个作业的完成时间与当前作业的到达时间取最大值再加上当前作业的服务时间。因此，在计算当前作业的完成时间时，应该将 `max(nowtime,node.arrivetime)` 改为 `max(prev_finishtime, node.arrivetime)`，其中 `prev_finishtime` 表示上一个作业的完成时间。 3. 在计算周转时间和带权周转时间时，应该使用 `node.finishtime - node.arrivetime` 和 `node.aroundtime/node.servicetime`，而不是 `node.aroundtime/node.servicetime` 和 `node.aroundtime/node.servicetime`。因为在计算完成时间时已经计算了周转时间和带权周转时间，所以不需要再次计算。 修改后的代码如下： ``` void run(FCFS &node) { node.finishtime = max(prev_finishtime, node.arrivetime) + node.servicetime; node.aroundtime = node.finishtime - node.arrivetime; node.weight_aroundtime = node.aroundtime / node.servicetime; prev_finishtime = node.finishtime; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值