ivew+vue实现表单设计器--拖拽增加、点击添加（二）

雨点打透心脏的1/2处 2022-12-23 06:21 161阅读 0赞

上一节讲了界面布局，这节主要介绍点击控件进行添加、拖拽控件进行添加。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center]  
首先介绍下实现表单绘制的原理：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 1]  
所以不管是点击添加还是拖拽添加，其实都是向绘制list里面添加组件对象而已。

*  申明绘制list

data() {
          return { 
            drawingList: [], 
          }
        },

*  点击组件进行添加：这个简单，就是注册click事件，点击的时候将组件对象追加到绘制list里面

<div
                      v-for="(element, index) in item.list"
                      :key="index"
                      class="components-item"
                      @click="addComponent(element)"
                    >
                      <div class="components-body">
                        <svg-icon :icon-class="element.__config__.tagIcon"/>
                        {
       { element.__config__.label }}
                      </div>
                    </div>

addComponent的实现代码：

addComponent(item) {
          this.forwardList=[];
          const clone = this.cloneComponent(item);
          this.fetchData(clone);
          this.drawingList.push(clone);
          this.activeFormItem(clone)
        },

*  拖拽组件用的是draggable组件。

<draggable
                    class="components-draggable"
                    :list="item.list"
                    :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                    :clone="cloneComponent"
                    draggable=".components-item"
                    :sort="false"
                    @end="onEnd"
                  >
                    <div
                      v-for="(element, index) in item.list"
                      :key="index"
                      class="components-item"
                      @click="addComponent(element)"
                    >
                      <div class="components-body">
                        <svg-icon :icon-class="element.__config__.tagIcon"/>
                        {
       { element.__config__.label }}
                      </div>
                    </div>
                  </draggable>

onEnd：

onEnd(obj) {
          this.forwardList=[];
          if (obj.from !== obj.to) {
            this.fetchData(tempActiveData)
            this.activeData = tempActiveData
            this.activeId = this.idGlobal
          }
        },

拖拽目标容器：

只要将:list="drawingList"绑定，拖拽进入的组件会自动添加到绘制list里。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/37d5dc04e2784dea9a7cac1047b42544.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201123004812914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70#pic_center