这篇文章主要介绍了Vue拖拽组件列表实现动态页面配置功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
需求描述
最近在做一个后台系统，有一个功能产品需求是页面分为左右两部分，通过右边的组件列表来动态配置左边的页面视图，并且左边由组件拼装起来的视图，可以实现上下拖拽改变顺序，也可以删除。
根据这个需求我做了下面这个demo。
功能分解
- 右边的组件列表，可以通过拖拽克隆到左边，拖拽结束后右边组件列表数量不会减少
- 左边的组件可以展开或收起
- 左边的组件可以上下拖拽，删除，但不可向右边拖拽
- 左边组件拖拽过程中不改变其展开和收起状态
demo截图
代码地址
vue-draggable-list
代码预览
<div class="row"> <div class="col-5"> <h3>组件配置页面展示</h3> <span>{{element.name}}</span><i class="el-icon-circle-close"></i><div>{{ element.content }}</div></div><div class="col-5"> <h3>可用组件列表</h3> <div class="list-group-item">{{ element.name }}</div></div></div>
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是Vue拖拽组件列表实现动态页面配置功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue拖拽组件列表实现动态页面配置功能
转载请注明原文链接：Vue拖拽组件列表实现动态页面配置功能
