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

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

主要介绍了Vue拖拽组件列表实现动态页面配置功能，本文通过实例代码给大家介绍的非常详细，具有一定的参

考借鉴价值,需要的朋友可以参考下

需求描述需求描述

最近在做一个后台系统，有一个功能产品需求是页面分为左右两部分，通过右边的组件列表来动态配置左边的页面视图，并且

左边由组件拼装起来的视图，可以实现上下拖拽改变顺序，也可以删除。

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

功能分解功能分解

vue-draggable-list

代码预览

<template>

<div class="row">

<div class="col-5">

<h3>组件配置页面展示</h3>

<draggable

tag="el-collapse"

class="dragArea list-group"

:list="list2"

:key="index"

v-model="activeNames"

@change="handleChange"

>

<el-collapse-item :name="element.id">

<template slot="title">

<span>{{element.name}}</span>

<i class="el-icon-circle-close" @click.stop="deleteItem(index)"></i>

</template>

<div>{{ element.content }}</div>

<draggable

class="dragArea list-group"

:list="list1"

:group="{ name: 'comp', pull: 'clone', put: false }"

@change="log"

>

<div class="list-group-item" v-for="element in list1" :key="element.id">{{ element.name }}</div>

</draggable>

</div>

</div>

order: 2,

components: {