V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
skotori
V2EX  ›  Vue.js

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

  •  
  •   skotori · 2022-06-10 16:11:50 +08:00 · 2419 次点击
    这是一个创建于 916 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    20 条回复    2022-06-13 15:51:06 +08:00
    Terry05
        1
    Terry05  
       2022-06-10 16:17:25 +08:00
    这种东西现在有一个专有名词,叫做低代码平台,慢慢建设吧,又是一个大工程
    basonwoo
        2
    basonwoo  
       2022-06-10 16:17:31 +08:00
    可以参考下这个的编辑界面实现
    https://github.com/MrXujiang/h5-Dooring
    liangtao927190
        3
    liangtao927190  
       2022-06-10 16:20:07 +08:00
    拖拽的话用这个: https://github.com/SortableJS/Vue.Draggable
    隐藏显示就自己控制页面组件的 v-if 或者 v-show
    组件长度或宽度麻烦一点,但应该也有库的,找一找。
    skotori
        4
    skotori  
    OP
       2022-06-10 16:20:20 +08:00
    @Terry05 感谢回复
    skotori
        5
    skotori  
    OP
       2022-06-10 16:20:49 +08:00
    @basonwoo 谢谢大佬,我去看看
    skotori
        6
    skotori  
    OP
       2022-06-10 16:21:08 +08:00
    @liangtao927190 感谢,我去看一下
    skotori
        7
    skotori  
    OP
       2022-06-10 16:34:48 +08:00
    通过 basonwoo 大佬提供的参考项目,我找到 react 有类似的库 https://github.com/MrXujiang/rc-drag ,基本上做到了拖拽改变位置和高宽,只是没有做到响应式的排序,就是拖拽完之后组件会自动填充空隙。
    skotori
        8
    skotori  
    OP
       2022-06-10 16:36:36 +08:00
    然后 liangtao927190 大佬推荐的库,我看了一下,基本上实现了拖拽改变位置,改变宽高的确有点麻烦
    LavaC
        9
    LavaC  
       2022-06-10 16:49:27 +08:00
    有过类似的需求,当时用了一个叫 Vue Grid Layout 的组件,不过这玩意也有点坑,比如无法限定高度。
    skotori
        10
    skotori  
    OP
       2022-06-10 16:51:55 +08:00
    @LavaC 谢谢回复,看了一下,感觉做得挺 6 的
    LavaC
        11
    LavaC  
       2022-06-10 16:52:53 +08:00
    @LavaC 也不是说它没参数限定行数,不过限定好行数后也能通过缩放一个元素把另一些元素顶出你设定的框框,作者是知道了这个问题的但没有改。
    skotori
        12
    skotori  
    OP
       2022-06-10 16:54:45 +08:00
    @LavaC 意思是高度无法固定是吧
    LavaC
        13
    LavaC  
       2022-06-10 16:57:24 +08:00
    @skotori 外面那个框的最大高度无法固定
    skotori
        14
    skotori  
    OP
       2022-06-10 16:57:57 +08:00
    @LavaC 了解了
    cszchen
        15
    cszchen  
       2022-06-10 17:01:24 +08:00 via iPhone
    保存一个对象,通过 props 传递给组件来渲染
    skotori
        16
    skotori  
    OP
       2022-06-10 17:08:39 +08:00
    @cszchen 谢谢回复,意思是监听鼠标的位置和动作,然后实时渲染的组件的定位和高宽
    markgor
        17
    markgor  
       2022-06-10 17:25:35 +08:00
    上面建议低代码平台的有点过了吧.....
    如果单纯是定义组件位置和显示隐藏,直接把这些组件对应的尺寸位置变量保存起来就好了啦....本地保存就存 localStore ,服务端保存就把 JSON 存进去.....
    AyaseEri
        18
    AyaseEri  
       2022-06-10 17:33:09 +08:00
    基本就是低代码那套,除了组件库是固定的。
    benfafa
        19
    benfafa  
       2022-06-10 17:41:54 +08:00
    我司好像是偷了阿里那套 https://lowcode-engine.cn/
    hymxm
        20
    hymxm  
       2022-06-13 15:51:06 +08:00
    vue-grid-layout 试试这个
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1618 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:39 · PVG 00:39 · LAX 08:39 · JFK 11:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.