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


Posted in Javascript onJune 17, 2019

需求描述

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

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

功能分解

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

demo截图

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

代码地址

vue-draggable-list

代码预览

<template>
 <div class="row">
  <div class="col-5">
   <h3>组件配置页面展示</h3>
   <draggable
    tag="el-collapse"
    class="dragArea list-group"
    :list="list2"
    group="comp"
    @change="log"
   >
    <el-collapse
     class="list-group-item left"
     v-for="(element,index) in 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>
     </el-collapse-item>
    </el-collapse>
   </draggable>
  </div>
  <div class="col-5">
   <h3>可用组件列表</h3>
   <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>
</template>
<script>
import draggable from "vuedraggable";
export default {
 name: "clone",
 display: "Clone",
 order: 2,
 components: {
  draggable
 },
 data() {
  return {
   list1: [
    { name: "组件1", id: 1, content: "内容内容内容。。。。" },
    { name: "组件2", id: 2, content: "内容内容内容。。。。" },
    { name: "组件3", id: 3, content: "内容内容内容。。。。" },
    { name: "组件4", id: 4, content: "内容内容内容。。。。" },
    { name: "组件5", id: 5, content: "内容内容内容。。。。" },
    { name: "组件6", id: 6, content: "内容内容内容。。。。" },
    { name: "组件7", id: 7, content: "内容内容内容。。。。" }
   ],
   list2: [],
   activeNames: [],
   count: 0
  };
 },
 methods: {
  log: function(evt) {
   console.log(evt);
   if (evt.added) {
    this.count += 1;
    const item = evt.added.element;
    const idx = this.list2.findIndex(e => e.id === item.id);
    let temp = JSON.parse(JSON.stringify(this.list2));
    temp[idx].id = this.count;
    this.list2 = temp;
   }
  },
  handleChange: function() {},
  deleteItem: function(index) {
   this.list2.splice(index, 1);
  }
 }
};
</script>

总结

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

Javascript 相关文章推荐
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
javascript实现日历效果
Jun 17 #Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 #Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 #Javascript
vue+element加入签名效果(移动端可用)
Jun 17 #Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 #Javascript
最简单的vue消息提示全局组件的方法
Jun 16 #Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 #Javascript
You might like
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
python动态加载包的方法小结
2016/04/18 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
实例代码讲解Python 线程池
2020/08/24 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
车辆工程专业求职信
2014/04/28 职场文书
留守儿童工作方案
2014/06/02 职场文书
红色电影观后感
2015/06/18 职场文书
班主任工作总结范文
2015/08/13 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript