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

前端  /  管理员 发布于 5年前   397

需求描述

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

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

功能分解

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

demo截图

代码地址

vue-draggable-list

代码预览

总结

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

您可能感兴趣的文章:

• 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
• vue拖拽组件使用方法详解
• Vue组件Draggable实现拖拽功能
• Vue拖拽组件开发实例详解