Comments (84)
ferqx
commented on August 15, 2024
16
作者做的很棒
from front-end-articles.
woai3c
commented on August 15, 2024
3
请问一下我自己加了echart组件，为什么不能放大缩小呢
看看 echarts 组件能不能动态调整大小，画布组件的宽度高度我都是设成 100% 的。
from front-end-articles.
xingxingzaixian
commented on August 15, 2024
3
这么好的项目，才1k多star，还有没有王法？还有没有法律？
from front-end-articles.
superchenchao
commented on August 15, 2024
2
厉害👍
from front-end-articles.
woai3c
commented on August 15, 2024
2
移植发现 vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () { return Promise.resolve("@/custom-component/".concat(key)).then(function (s) { return (0, _interopRequireWildcard2.default)(webpack_require("./src/custom-component sync recursive")(s)); }); } Reason: Error: Cannot find module '@/custom-component/VButton' 如何解决啊
看报错信息就能解决你的问题了，这不是说找不到组件吗？这种问题先自己百度翻译一下，网上找找解决方案。
from front-end-articles.
cengjiheshi666
commented on August 15, 2024
2
牛牛牛！
from front-end-articles.
qichangleixin
commented on August 15, 2024
1
真特么牛逼
from front-end-articles.
123lujiaqiang
commented on August 15, 2024
1
很厉害，已fork,学习中，希望能够自己添加一些功能
from front-end-articles.
watermirror1107
commented on August 15, 2024
1
少了一个容器的功能，不过也很厉害的，大佬牛逼
from front-end-articles.
JS-banana
commented on August 15, 2024
1
优秀啊，老哥，我悟了🤓🎉
from front-end-articles.
liuguangsen0409
commented on August 15, 2024
1
本来想说怎么和 掘金 上一个人 做的好像 一看资料 还真就是同一个人
from front-end-articles.
wasaier
commented on August 15, 2024
1
very nice
from front-end-articles.
Ashy6
commented on August 15, 2024
1
谭总太顶了
from front-end-articles.
LT877677447
commented on August 15, 2024
1
感谢大佬的分享，对我来说是很不错的教学，真的很棒
from front-end-articles.
nasus0315
commented on August 15, 2024
1
谭总这个保存功预览链接是不起作用吗
有用的，我刚看了一下预览，保存（这是本地存储）和预览都没问题。
噢噢 对 保存没问题，那谭总生成页面的功能是不是没有实现咩 哦对了 谭总 可以申请加个vx好友么
from front-end-articles.
wxm520123
commented on August 15, 2024
1
作者受我一拜！！！学不完根本学不完！！！学无止境！！！
from front-end-articles.
363231149
commented on August 15, 2024
from front-end-articles.
woai3c
commented on August 15, 2024
作者做的很棒
谢谢
from front-end-articles.
ferqx
commented on August 15, 2024
这个能生成代码么
from front-end-articles.
woai3c
commented on August 15, 2024
这个能生成代码么
看一下第二篇 #20
from front-end-articles.
laughingchen123
commented on August 15, 2024
请问一下我自己加了echart组件，为什么不能放大缩小呢
from front-end-articles.
hitao123
commented on August 15, 2024
厉害了
from front-end-articles.
XiangNianZWM
commented on August 15, 2024
我在项目中添加了swiper组件。但是swiper组件自带左右滑动，所以在选中swiper的时候就无法选中该组件了。无法进行设置以及拖动
from front-end-articles.
XiangNianZWM
commented on August 15, 2024
我在项目中添加了swiper组件。但是swiper组件自带左右滑动，所以在选中swiper的时候就无法选中该组件了。无法进行设置以及拖动
from front-end-articles.
woai3c
commented on August 15, 2024
我在项目中添加了swiper组件。但是swiper组件自带左右滑动，所以在选中swiper的时候就无法选中该组件了。无法进行设置以及拖动
自定义组件可以用一个假的组件来代替 swiper，等真正渲染时再用 swiper 代替。
from front-end-articles.
zengyuehao
commented on August 15, 2024
感谢，我想问一下有什么办法让按钮，图片刷新后依然保持在编辑组件中而不被刷新掉
from front-end-articles.
XiangNianZWM
commented on August 15, 2024
我在项目中添加了swiper组件。但是swiper组件自带左右滑动，所以在选中swiper的时候就无法选中该组件了。无法进行设置以及拖动
自定义组件可以用一个假的组件来代替 swiper，等真正渲染时再用 swiper 代替。
在哪里设置渲染的时候渲染真正的swiper的呢？
from front-end-articles.
woai3c
commented on August 15, 2024
感谢，我想问一下有什么办法让按钮，图片刷新后依然保持在编辑组件中而不被刷新掉
页面上面有一个保存按钮，保存一下就可以了。如果不想手动保存，可以在修改快照的时候自动执行保存。
from front-end-articles.
woai3c
commented on August 15, 2024
我在项目中添加了swiper组件。但是swiper组件自带左右滑动，所以在选中swiper的时候就无法选中该组件了。无法进行设置以及拖动
自定义组件可以用一个假的组件来代替 swiper，等真正渲染时再用 swiper 代替。
在哪里设置渲染的时候渲染真正的swiper的呢？
可以看一下鲁班 H5 的做法，它是将真正要渲染的组件放在右边，不放在画布中。
from front-end-articles.
XiangNianZWM
commented on August 15, 2024
我在项目中添加了swiper组件。但是swiper组件自带左右滑动，所以在选中swiper的时候就无法选中该组件了。无法进行设置以及拖动
自定义组件可以用一个假的组件来代替 swiper，等真正渲染时再用 swiper 代替。
在哪里设置渲染的时候渲染真正的swiper的呢？
可以看一下鲁班 H5 的做法，它是将真正要渲染的组件放在右边，不放在画布中。
好的。谢谢回答。我去了解了解。
from front-end-articles.
yql2000
commented on August 15, 2024
选中多个按钮或者图片为什么拖动不了多个呢
from front-end-articles.
woai3c
commented on August 15, 2024
选中多个按钮或者图片为什么拖动不了多个呢
先点组合
from front-end-articles.
yql2000
commented on August 15, 2024
选中多个按钮或者图片为什么拖动不了多个呢
先点组合
感谢感谢
from front-end-articles.
18627229927
commented on August 15, 2024
当一个组件是通过手动输入x坐标和y坐标的样式，拖动另外一个组件和它对齐之后，再拖动8个小圆点放大缩小会有很严重的bug，想了好久，不知道怎么解决。
from front-end-articles.
woai3c
commented on August 15, 2024
当一个组件是通过手动输入x坐标和y坐标的样式，拖动另外一个组件和它对齐之后，再拖动8个小圆点放大缩小会有很严重的bug，想了好久，不知道怎么解决。
做个动图复现一下
from front-end-articles.
18627229927
commented on August 15, 2024
当一个组件是通过手动输入x坐标和y坐标的样式，拖动另外一个组件和它对齐之后，再拖动8个小圆点放大缩小会有很严重的bug，想了好久，不知道怎么解决。
做个动图复现一下
我描述错了，准确说是当直接修改组件的x y坐标的input值，再缩放这个组件就会出错
from front-end-articles.
woai3c
commented on August 15, 2024
当一个组件是通过手动输入x坐标和y坐标的样式，拖动另外一个组件和它对齐之后，再拖动8个小圆点放大缩小会有很严重的bug，想了好久，不知道怎么解决。
做个动图复现一下
我描述错了，准确说是当直接修改组件的x y坐标的input值，再缩放这个组件就会出错
我试了一下修改坐标后，对组件进行缩放，没有问题。可以做个动图复现一下吗？
from front-end-articles.
18627229927
commented on August 15, 2024
当一个组件是通过手动输入x坐标和y坐标的样式，拖动另外一个组件和它对齐之后，再拖动8个小圆点放大缩小会有很严重的bug，想了好久，不知道怎么解决。
做个动图复现一下
我描述错了，准确说是当直接修改组件的x y坐标的input值，再缩放这个组件就会出错
我试了一下修改坐标后，对组件进行缩放，没有问题。可以做个动图复现一下吗？
from front-end-articles.
woai3c
commented on August 15, 2024
当一个组件是通过手动输入x坐标和y坐标的样式，拖动另外一个组件和它对齐之后，再拖动8个小圆点放大缩小会有很严重的bug，想了好久，不知道怎么解决。
做个动图复现一下
我描述错了，准确说是当直接修改组件的x y坐标的input值，再缩放这个组件就会出错
我试了一下修改坐标后，对组件进行缩放，没有问题。可以做个动图复现一下吗？
在项目下面提个 issue 吧，等我有空了改下。
from front-end-articles.
qichangleixin
commented on August 15, 2024
你怎么能如此优秀
from front-end-articles.
woai3c
commented on August 15, 2024
这么好的项目，才1k多star，还有没有王法？还有没有法律？
谢谢
from front-end-articles.
woai3c
commented on August 15, 2024
你怎么能如此优秀
谢谢
from front-end-articles.
wushiloutai
commented on August 15, 2024
怎么能保存成静态的html 呢
from front-end-articles.
woai3c
commented on August 15, 2024
怎么能保存成静态的html 呢
目前没有研究这个，可以把组件的 json 数据保存在后台。再单独起一个项目把渲染功能部分抽出来，用户看的时候就看这个项目生成的页面。数据从后台拉取就可以了。具体请看一下这个系列的第二篇和第三篇文章。
from front-end-articles.
2556227850
commented on August 15, 2024
大佬，这个编辑器组件大小px改成百分百有什么思路吗
from front-end-articles.
ZIA-Hans
commented on August 15, 2024
是用一个个对象来保存组件的数据、样式、交互、动画吗；存到后台去是转换成Json格式存放，那具体怎么把对象渲染成一个组件呢大佬！
from front-end-articles.
woai3c
commented on August 15, 2024
是用一个个对象来保存组件的数据、样式、交互、动画吗；存到后台去是转换成Json格式存放，那具体怎么把对象渲染成一个组件呢大佬！
v-for 遍历对象，然后渲染组件，文章不是有写吗？
from front-end-articles.
zhuangliao
commented on August 15, 2024
请问一下我自己加了echart组件，为什么不能放大缩
from front-end-articles.
woai3c
commented on August 15, 2024
请问一下我自己加了echart组件，为什么不能放大缩
看一下示例组件，里面有 width height 等属性，可以参考一下。
from front-end-articles.
uktaine-win
commented on August 15, 2024
学习
from front-end-articles.
bearhb2018
commented on August 15, 2024
有个问题没想明白，为啥不直接用*和/，而采用的是数学函数？
from front-end-articles.
woai3c
commented on August 15, 2024
有个问题没想明白，为啥不直接用*和/，而采用的是数学函数？
乘除法都是直接用符号的，你说的是哪块代码？
from front-end-articles.
lydAndtry
commented on August 15, 2024
computed: mapState([
'editor' // undefined
]),
为什么会显示未定义呀，
from front-end-articles.
woai3c
commented on August 15, 2024
computed: mapState([ 'editor' // undefined ]), 为什么会显示未定义呀，
没看懂，也没有上下文，有问题请在具体的项目下提 issue.
from front-end-articles.
lydAndtry
commented on August 15, 2024
移植发现
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () {
return Promise.resolve("@/custom-component/".concat(key)).then(function (s) {
return (0, _interopRequireWildcard2.default)(webpack_require("./src/custom-component sync recursive")(s));
});
}
Reason: Error: Cannot find module '@/custom-component/VButton'
如何解决啊
from front-end-articles.
jyb911
commented on August 15, 2024
学习中，受益匪浅
from front-end-articles.
MaryLij
commented on August 15, 2024
作者，请问在拖动画布上的组件时候，当前被拖动元素略显卡顿是怎么回事？解决了好久也没有找到这个问题的解决方案。帮帮孩子吧，谢谢了
from front-end-articles.
woai3c
commented on August 15, 2024
作者，请问在拖动画布上的组件时候，当前被拖动元素略显卡顿是怎么回事？解决了好久也没有找到这个问题的解决方案。帮帮孩子吧，谢谢了
把控制台关了就可以了。
from front-end-articles.
wasaier
commented on August 15, 2024
very nice
from front-end-articles.
moshweilei
commented on August 15, 2024
比如放置1000个组件控件，编辑会不会卡顿？组件在多少范围内不会卡顿呢？
from front-end-articles.
woai3c
commented on August 15, 2024
比如放置1000个组件控件，编辑会不会卡顿？组件在多少范围内不会卡顿呢？
这个没测试过，1000 个组件的场景，估计一般的页面都会卡。
from front-end-articles.
moshweilei
commented on August 15, 2024
那你为什么不考虑在更为成熟的开源库的基础上做这个东西呢？因为在那些开源库上可以支持1万节点， 我看你在之前就研发这个产品，当时你完全可以作为一个创业项目来对待这个产品。
from front-end-articles.
moshweilei
commented on August 15, 2024
把几个节点组合之后复制在拆分会报错
from front-end-articles.
woai3c
commented on August 15, 2024
那你为什么不考虑在更为成熟的开源库的基础上做这个东西呢？因为在那些开源库上可以支持1万节点， 我看你在之前就研发这个产品，当时你完全可以作为一个创业项目来对待这个产品。
这个项目只是感兴趣研究的。
from front-end-articles.
woai3c
commented on August 15, 2024
把几个节点组合之后复制在拆分会报错
把复现步骤说一下，代码问题请在具体仓库下提 issue.
from front-end-articles.
fjl1345198896
commented on August 15, 2024
如何不让组件拖到画布外呢
from front-end-articles.
woai3c
commented on August 15, 2024
如何不让组件拖到画布外呢
判断一下 x y 坐标和画布距离
from front-end-articles.
JNing5473452
commented on August 15, 2024
牛！问下这个保存代码的部分，可以将拖拽好的页面保存成vue源码做二开吗？
from front-end-articles.
woai3c
commented on August 15, 2024
目前不支持这个功能
谭光志
***@***.***
…------------------ 原始邮件 ------------------
发件人: ***@***.***>;
发送时间: 2023年2月3日(星期五) 下午2:48
收件人: ***@***.***>;
抄送: ***@***.***>; ***@***.***>;
主题: Re: [woai3c/Front-end-articles] 可视化拖拽组件库一些技术要点原理分析 (#19)
牛！问下这个保存代码的部分，可以将拖拽好的页面保存成vue源码做二开吗？
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
from front-end-articles.
JNing5473452
commented on August 15, 2024
目前不支持这个功能 谭光志 @.***
…
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年2月3日(星期五) 下午2:48 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [woai3c/Front-end-articles] 可视化拖拽组件库一些技术要点原理分析 (#19) 牛！问下这个保存代码的部分，可以将拖拽好的页面保存成vue源码做二开吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>
好的，谢谢
from front-end-articles.
SaebaRyoo
commented on August 15, 2024
是不是要将自定义组件加到项目里才能用？
from front-end-articles.
woai3c
commented on August 15, 2024
是不是要将自定义组件加到项目里才能用？
对
from front-end-articles.
15779709592
commented on August 15, 2024
请问如果要做tab组件或者容器组件，一个组件中拖入多个组件，这个有实现思路吗？
from front-end-articles.
woai3c
commented on August 15, 2024
请问如果要做tab组件或者容器组件，一个组件中拖入多个组件，这个有实现思路吗？
这种容器需要支持嵌套组件才行，网上有很多，你可以看看这个 http://cdn.kcz66.com/k-form-design.html
from front-end-articles.
sunchencc
commented on August 15, 2024
挂机 出去玩O(∩_∩)O
from front-end-articles.
liming1515
commented on August 15, 2024
如何让每个组件添加上连线的功能
from front-end-articles.
woai3c
commented on August 15, 2024
如何让每个组件添加上连线的功能
这得用 canvas 或者 svg 来做，这方面可以看下别的库。比如 x6 就挺不错的 https://x6.antv.vision/zh/examples/gallery。
from front-end-articles.
nasus0315
commented on August 15, 2024
谭总这个保存功预览链接是不起作用吗
from front-end-articles.
woai3c
commented on August 15, 2024
谭总这个保存功预览链接是不起作用吗
有用的，我刚看了一下预览，保存（这是本地存储）和预览都没问题。
from front-end-articles.
woai3c
commented on August 15, 2024
谭总这个保存功预览链接是不起作用吗
有用的，我刚看了一下预览，保存（这是本地存储）和预览都没问题。
噢噢 对 保存没问题，那谭总生成页面的功能是不是没有实现咩 哦对了 谭总 可以申请加个vx好友么
没实现，微信可以加 qq411020382
from front-end-articles.
wxm520123
commented on August 15, 2024
第一次直观的体会到什么是牛逼呜呜呜呜呜呜呜
from front-end-articles.
sunchencc
commented on August 15, 2024
挂机 出去玩O(∩_∩)O
from front-end-articles.
woai3c
commented on August 15, 2024
作者受我一拜！！！学不完根本学不完！！！学无止境！！！
加油！
from front-end-articles.
woai3c
commented on August 15, 2024
你好，我是抖音、哔哩哔哩、头条、微信视频号技术工具up主，看到你的产品很好，想帮推，需要的话v：brizer1992。
感谢您的好意，我这个项目就是教学用的，目前不算是产品。所以暂时不需要了，再次感谢。
from front-end-articles.
Related Issues (20)
- 套件问题 HOT 2
- 如何适配呢? HOT 1
- 页面上不是经常容易出现顶部的swiper组件嘛 HOT 1
- 2021 年终总结：奔向北京，迎接 996！ HOT 20
- 手把手教你写一个简易的微前端框架 HOT 5
- 点击画布中的组件没有选中的8个点 HOT 1
- 可视化拖拽组件库一些技术要点原理分析（四） HOT 16
- markdown 编辑器实现双屏同步滚动 HOT 1
- 组合功能只有在画布上操作才可以实现，在其他组件上操作会拖动组件，可以在其他逐渐锁定的情况下进行拖拽组合吗 HOT 1
- 有个疑惑点，画布上拖拽的数据是根据componentData变化的还是curComponent，没发现两者的关联之处，求指导
- qwq HOT 1
- 协同文档 HOT 1
- > > > > 你好，关于发布的部分可以详细说明下吗？ HOT 2
- 【开源自荐】每日更新的前端面试题库
- Vue 加载远程组件的解决方案 HOT 2
- 一个 git 仓库下拥有多个项目的 git hooks 配置方案
- 从零开始实现一个玩具版浏览器渲染引擎
- 低代码与大语言模型的探索实践 HOT 3
- 如何为 Nestjs 编写单元测试和 E2E 测试
- 前端性能优化：从系统分析到实践策略
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from front-end-articles.