前端实现组件拖拽,低代码技术难点攻破

·  阅读 13543
前端实现组件拖拽,低代码技术难点攻破

前言

随着低代码越来越流行,对于一个sass平台来说,能满足用户千变万化的需求十分重要。小凌在不久前接触了一个需求:

2.png

原先的逻辑是这样的,根据后端返回的JSON数据去渲染出我们的前端组件。目前很多用户反馈是否可以做一个可拖拽的功能满足他们优先展示某些内容的需求。

实现分析

在管理端用户需要实时预览并可拖拽组件。

image.png

基本构成

涉及插件

这次主要用到了拖拽组件 vuedraggable.

官网地址:david-desmaisons.github.io/draggable-e…

安装插件

// 安装
yarn add vuedraggable

// 引入
import vuedraggable from 'vuedraggable';

components: { vuedraggable},
复制代码

主要代码

index.html

<!-- 拖拽 -->
<vuedraggable class="wrapper"  v-model="mobileComList">
  <div class="com"  :class="{'active':activeId === item.id}" @click="slectCom(item)" v-for="item in mobileComList" :key="item.id">
      <!-- 遍历组件 -->
    <component
        :is="item.name"
        :key="item.id"
        :content="item.content"
        skHight="180px"
    ></component>
  </div>
</vuedraggable>
复制代码

index.vue

   // data
  // 手机端组件
  mobileComList:[
    {
      id: 4,
      name: "banner", // 所选用的组件name值
      content: { title: "banner图" }, // 传递给组件的参数
    },
    {
      id: 3,
      name: "menus",
      content: { title: "金刚区" },
    },
    {
      id: 1,
      name: "pics",
      content: { title: "图片组件", type: 1 },
    },
    {
      id: 5,
      name: "goods",
      content: { title: "商品区", type: 2 },
    }]
复制代码

成果展示

动画1.gif

大家可以看到在提交时金刚区的位置变化,至此就实现了简单的拖拽。

进阶实现

动画2.gif

比如我们需要我们的数据在多个组中进行拖拽,这时我们就需要transition-group这个属性了。

index.html


<div class="group-box">
  <div class="group">
      本次迭代加班人员
      <vuedraggable v-model="arr1" group="site" >
        <transition-group>
            <div class="item active" v-for="item in arr1" :key="item.id">{{item.name}}</div>
        </transition-group>
    </vuedraggable>
  </div>
  <div class="group">
      不参与本次迭代人员
      <vuedraggable v-model="arr2" group="site" >
        <transition-group>
            <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
        </transition-group>
    </vuedraggable>
  </div>
  <div>
      <button @click="savePeo">提交数据</button>
  </div>
</div>
复制代码

index.vue

// data
arr1:[{id:1,name:'小凌'},{id:2,name:'小铁'},{id:3,name:'小伟'},{id:4,name:'小涵'}],
arr2:[{id:1,name:'酒桶'},{id:2,name:'木兰'},{id:3,name:'典韦'},{id:4,name:'瑞兹'}]
// methods
savePeo(){
        let saveList = [] // 参与本次迭代
        let noJoinList = [] // 不参与本次迭代
        this.arr1.forEach(item => saveList.push(item.name));
        this.arr2.forEach(item => noJoinList.push(item.name));
        alert(`参与本次迭代人员:${saveList.join(',')}; \n 不参与本次迭代人员:${noJoinList.join(',')}`)
    }
复制代码

如此就实现了我们想要的功能。大家还有什么想实现的功能留言评论吧。

项目地址

项目地址:github.com/FireSmallPa…

分类:
前端
收藏成功!
已添加到「」, 点击更改