Vue拖拽组件列表实现动态页面配置

需求描述

最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除。

根据这个需求我做了下面这个demo。

功能分解

  • 右边的组件列表,可以通过拖拽克隆到左边,拖拽结束后右边组件列表数量不会减少
  • 左边的组件可以展开或收起
  • 左边的组件可以上下拖拽,删除,但不可向右边拖拽
  • 左边组件拖拽过程中不改变其展开和收起状态

demo截图

Vue拖拽组件列表实现动态页面配置_第1张图片

代码地址

vue-draggable-list

代码预览



你可能感兴趣的:(Vue拖拽组件列表实现动态页面配置)