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

需求描述

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

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

功能分解

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

demo截图

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

代码地址

vue-draggable-list

代码预览


总结

以上所述是小编给大家介绍的Vue拖拽组件列表实现动态页面配置功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

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