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

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

  •  
  •   skotori · 175 天前 · 1566 次点击
    这是一个创建于 175 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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