想请教一下大佬们， VUE 管理后台项目，自定义工作台是如何实现的？

[skotori]

目前有一个需求，就是用户可以自定义工作台。我们做好一些组件之后，用户可以显示或隐藏这些组件，可以拖拽改变组件位置，还可以拖拽改变组件的长度或宽度。这种需求要怎么去实现呢？以前没做过，所以前来请教一下。

[Terry05]

这种东西现在有一个专有名词，叫做低代码平台，慢慢建设吧，又是一个大工程

[basonwoo]

可以参考下这个的编辑界面实现
https://github.com/MrXujiang/h5-Dooring

[JimmyRogue]

拖拽的话用这个： https://github.com/SortableJS/Vue.Draggable 。
隐藏显示就自己控制页面组件的 v-if 或者 v-show
组件长度或宽度麻烦一点，但应该也有库的，找一找。

[skotori]

@Terry05 感谢回复

[skotori]

@basonwoo 谢谢大佬，我去看看

[skotori]

@liangtao927190 感谢，我去看一下

[skotori]

通过 basonwoo 大佬提供的参考项目，我找到 react 有类似的库 https://github.com/MrXujiang/rc-drag ，基本上做到了拖拽改变位置和高宽，只是没有做到响应式的排序，就是拖拽完之后组件会自动填充空隙。

[skotori]

然后 liangtao927190 大佬推荐的库，我看了一下，基本上实现了拖拽改变位置，改变宽高的确有点麻烦

[LavaC]

有过类似的需求，当时用了一个叫 Vue Grid Layout 的组件，不过这玩意也有点坑，比如无法限定高度。

[skotori]

@LavaC 谢谢回复，看了一下，感觉做得挺 6 的

[LavaC]

@LavaC 也不是说它没参数限定行数，不过限定好行数后也能通过缩放一个元素把另一些元素顶出你设定的框框，作者是知道了这个问题的但没有改。

[skotori]

@LavaC 意思是高度无法固定是吧

[LavaC]

@skotori 外面那个框的最大高度无法固定

[skotori]

@LavaC 了解了

[cszchen]

保存一个对象，通过 props 传递给组件来渲染

[skotori]

@cszchen 谢谢回复，意思是监听鼠标的位置和动作，然后实时渲染的组件的定位和高宽

[markgor]

上面建议低代码平台的有点过了吧.....
如果单纯是定义组件位置和显示隐藏，直接把这些组件对应的尺寸位置变量保存起来就好了啦....本地保存就存 localStore ，服务端保存就把 JSON 存进去.....

[AyaseEri]

基本就是低代码那套，除了组件库是固定的。

[benfafa]

我司好像是偷了阿里那套 https://lowcode-engine.cn/

[hymxm]

vue-grid-layout 试试这个