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

上一节讲了界面布局，这节主要介绍点击控件进行添加、拖拽控件进行添加。

首先介绍下实现表单绘制的原理：

所以不管是点击添加还是拖拽添加，其实都是向绘制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
      }
    },

拖拽目标容器：

 <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
              <draggable-item
                v-for="(item, index) in drawingList"
                :key="item.renderKey"
                :drawing-list="drawingList"
                :current-item="item"
                :index="index"
                :active-id="activeId"
                :form-conf="formConf"
                @activeItem="activeFormItem"
                @copyItem="drawingItemCopy"
                @deleteItem="drawingItemDelete"
              />
            </draggable>

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