feat: 左侧附件支持鼠标点击形式添加至画布区域

BoBoooooo · Mar 2, 2021 · df1906d · df1906d
1 parent 6c2c3c6
commit df1906d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
@@ -58,7 +58,7 @@
         <div class="components-list">
           <div class="widget-cate">表单组件</div>
           <Draggable :clone="handleClone" tag="ul" :list="basicComponents" v-bind="getDraggableOptions()" :move="handleMove">
-            <li class="form-edit-widget-label" v-for="(item, index) in basicComponents" :key="index">
+            <li class="form-edit-widget-label" v-for="(item, index) in basicComponents" :key="index" @click="addWidget(item)">
               <div>
                 <Icon class="icon" :name="item.icon"></Icon>
                 <span>{{ item.name }}</span>
@@ -67,7 +67,7 @@
           </Draggable>
           <div class="widget-cate">高级/异步组件</div>
           <Draggable :clone="handleClone" tag="ul" :list="advanceComponents" v-bind="getDraggableOptions()" :move="handleMove">
-            <li class="form-edit-widget-label" v-for="(item, index) in advanceComponents" :key="index">
+            <li class="form-edit-widget-label" v-for="(item, index) in advanceComponents" :key="index" @click="addWidget(item)">
               <div>
                 <Icon class="icon" :name="item.icon"></Icon>
                 <span>{{ item.name }}</span>
@@ -83,6 +83,7 @@
               }"
               v-for="(item, index) in layoutComponents"
               :key="index"
+               @click="addWidget(item)"
             >
               <div>
                 <Icon class="icon" :name="item.icon"></Icon>
@@ -92,7 +93,7 @@
           </Draggable>
           <div class="widget-cate">基础图表</div>
           <Draggable :clone="handleClone" tag="ul" :list="chartComponents" v-bind="getDraggableOptions()" :move="handleMove">
-            <li class="form-edit-widget-label" v-for="(item, index) in chartComponents" :key="index">
+            <li class="form-edit-widget-label" v-for="(item, index) in chartComponents" :key="index"  @click="addWidget(item)">
               <div>
                 <Icon class="icon" :name="item.icon"></Icon>
                 <span>{{ item.name }}</span>
@@ -281,6 +282,12 @@ export default {
     changeMode(mode) {
       this.currentMode = mode;
     },
+    // 点击添加组件
+    addWidget(item) {
+      this.widgetForm.list.push(
+        this.handleClone(item),
+      );
+    },
     // 深拷贝防止拖拽clone后污染原组件,统一给所有拖拽出来的组件设置key,model
     handleClone(origin) {
       const {

diff --git a/src/component/form-designer/src/WidgetForm.vue b/src/component/form-designer/src/WidgetForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="widget-form-container">
-    <div v-if="data.list.length == 0" class="form-empty"><SvgIcon icon-class="form_empty" class="form-empty-icon"></SvgIcon> 拖拽组件至这里吧!</div>
+    <div v-if="data.list.length == 0" class="form-empty"><SvgIcon icon-class="form_empty" class="form-empty-icon"></SvgIcon> 拖拽 或 点击 添加组件至此处!</div>
     <el-form :label-position="data.config.labelPosition" :label-width="data.config.labelWidth ? data.config.labelWidth + 'px' : '140px'" :size="data.config.size" class="widget-form">
       <Draggable
         class="widget-form"