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