这是一个创建于 932 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前有一个需求，就是用户可以自定义工作台。我们做好一些组件之后，用户可以显示或隐藏这些组件，可以拖拽改变组件位置，还可以拖拽改变组件的长度或宽度。这种需求要怎么去实现呢？以前没做过，所以前来请教一下。
 |
1
Terry05 2022-06-10 16:17:25 +08:00
这种东西现在有一个专有名词，叫做低代码平台，慢慢建设吧，又是一个大工程
|
 |
2
basonwoo 2022-06-10 16:17:31 +08:00
可以参考下这个的编辑界面实现
https://github.com/MrXujiang/h5-Dooring |
 |
3
liangtao927190 2022-06-10 16:20:07 +08:00
拖拽的话用这个： https://github.com/SortableJS/Vue.Draggable 。
隐藏显示就自己控制页面组件的 v-if 或者 v-show 组件长度或宽度麻烦一点，但应该也有库的，找一找。 |
 |
6
skotori OP @liangtao927190 感谢，我去看一下
|
|
7
skotori OP 通过 basonwoo 大佬提供的参考项目，我找到 react 有类似的库 https://github.com/MrXujiang/rc-drag ，基本上做到了拖拽改变位置和高宽，只是没有做到响应式的排序，就是拖拽完之后组件会自动填充空隙。
|
|
8
skotori OP 然后 liangtao927190 大佬推荐的库，我看了一下，基本上实现了拖拽改变位置，改变宽高的确有点麻烦
|
 |
9
LavaC 2022-06-10 16:49:27 +08:00
有过类似的需求，当时用了一个叫 Vue Grid Layout 的组件，不过这玩意也有点坑，比如无法限定高度。
|
|
11
LavaC 2022-06-10 16:52:53 +08:00
@LavaC 也不是说它没参数限定行数，不过限定好行数后也能通过缩放一个元素把另一些元素顶出你设定的框框，作者是知道了这个问题的但没有改。
|
 |
15
cszchen 2022-06-10 17:01:24 +08:00 via iPhone
保存一个对象，通过 props 传递给组件来渲染
|
 |
17
markgor 2022-06-10 17:25:35 +08:00
上面建议低代码平台的有点过了吧.....
如果单纯是定义组件位置和显示隐藏，直接把这些组件对应的尺寸位置变量保存起来就好了啦....本地保存就存 localStore ，服务端保存就把 JSON 存进去..... |
 |
18
AyaseEri 2022-06-10 17:33:09 +08:00
基本就是低代码那套，除了组件库是固定的。
|
 |
19
benfafa 2022-06-10 17:41:54 +08:00
我司好像是偷了阿里那套 https://lowcode-engine.cn/
|
 |
20
hymxm 2022-06-13 15:51:06 +08:00
vue-grid-layout 试试这个
|
Select Language