
用于首页元素布局,能随意拖动,自动排序,还能改变元素大小,同时能记录元素的位置,以便储存。 我现在在研究 vue-grid-layout ,但是他的宽高设置实在令人困惑
1 lisxour 2024 年 5 月 23 日 没有任意调整大小的吧,都是按格子来调的 |
3 NickHopps 2024 年 5 月 23 日 试试 gridstack.js ,可以像素级调整大小,但是问题就是全屏自适应不如 vue-grid-layout 灵活。 |
5 LandCruiser 2024 年 5 月 23 日 首页是很多复杂的元素,还是元素比较简单?实在不行直接用 canvas ,用 fabric.js 这个库,然后自己写一套绘制和布局的方法,或者干脆元素都给丫做成图片,连绘制方法都省了,写一套布局,拖动,缩放,这都是 fabric 自带的 |
6 MRG0 OP @LandCruiser #5 其实比较简单,最多 10 多个需要排列的元素 |
8 MRG0 OP @LandCruiser #5 元素里还有一些需要显示和操作的东西 |
9 LandCruiser 2024 年 5 月 23 日 @MRG0 感觉 canvas 方案工作量比较大,不太合适 |
10 llllk 2024 年 5 月 23 日 之前用 vue-grid-layout 有做过类似的需求,不过只兼容到固定尺寸 1920x1080 宽高单位为 1px ,甚至还在容器里面再布局容器,改了些源码,默认的托拽我记得单位,是否覆盖属性不能通过 api 修改 |
11 LavaC 2024 年 5 月 23 日 两年前用过 vue-grid-layout ,问题这插件不限高,所以做不了固定宽高的自动排序 |
12 dzdh 2024 年 5 月 23 日 qq 空间? |
13 dzdh 2024 年 5 月 23 日 |
15 jy02534655 2024 年 5 月 23 日 找个表单设计器改改就行了 |
16 jy02534655 2024 年 5 月 23 日 比如说 https://github.com/JakHuang/form-generator 这个,把里面的表单组件换成首页组件不就行了,然后根据输出的 json 去生成页面 |
18 MRG0 OP @jy02534655 #16 他这个在线演示走的 giteeio ,已经寄了 |
19 MRG0 OP @jy02534655 #16 确实就是这种设计思路 |
20 jy02534655 2024 年 5 月 24 日 翻个墙嘛 @MRG0 |
21 MRG0 OP @jy02534655 #20 我想用 vue-draggable 再结合一个缩放库好像也能做,flex-wrap ,数组的顺序就是每一个元素的位置 |
22 sanmaozhao 2024 年 5 月 24 日 同样的需求,我用 vue-grid-layout 实现的。目前感觉效果不错 >任意调整大小 这个需求意义不大吧,如果真的最小粒度是 1px ,那么多个区块之间最终用户想对齐,都会很困难 把格子的最小粒度调小点就是了,比如 10px 所以 OP 具体有啥解决不了的问题,不如具体说一下? |
23 MRG0 OP @sanmaozhao #22 任意调整大小属于需求如此,只能去实现。我尝试把粒度改为 1px ,这样写确定长宽的元素就更方便了,但是,我想在每个元素内添加不同内容该怎么写呢,v-if 吗 |
24 sanmaozhao 2024 年 5 月 24 日 >但是,我想在每个元素内添加不同内容该怎么写呢 这和 vue-grid-layout 或者其他任意布局库就都没关系了 每个区块都有自己的数据啊,比如 { w:10, // 宽 h:4, // 高 x:0, // 水平位置 y:0, // 垂直位置 content:'内容都保存在这里' } |
25 MRG0 OP @sanmaozhao #24 content 里写 jsx 吗,感觉好像有点难度 |
26 MRG0 OP @sanmaozhao #24 vue-grid-layout 还是 vue-draggable 还需要进一步实验,最近两天都在改其他东西的样式 |
27 jy02534655 2024 年 5 月 24 日 @MRG0 https://github.com/JakHuang/form-generator 这个就是基于 vue-draggable 来的,然后用 element 的 layout 来控制布局的 |