组件添加

ruoyi-ui/src/mock/cpnsList.js

@@ -4,15 +4,18 @@ export const cpnsList = [
     classType: 'icon-m-anniu',
     type: 'button',
     text: '按钮',
+    dom: '<div style="width: 100%; height: 100%; background: pink;">按钮</div>'
   },
   {
     classType: 'icon-wenben',
     type: 'text',
     text: '文字',
+    dom: '<div style="width: 100%; height: 100%; background: #000;">文本</div>'
   },
   {
     classType: 'icon-tupian',
     type: 'image',
     text: '图片',
+    dom: '<div style="width: 100%; height: 100%; background: skyblue;">上传图片</div>'
   }
 ]

ruoyi-ui/src/views/template/addTemplate/blocks/detailDialog.vue

@@ -23,7 +23,7 @@
         <div class="box-btns">
           <h3>组件库</h3>
           <div class="box-btns-cpns">
-            <div v-for="(item, index) in cpnsList" :key="index"  class="box-btns-cpns-cpn">
+            <div v-for="(item, index) in cpnsList" :key="index"  class="box-btns-cpns-cpn" @click="addCpns(item)">
               <span class="iconfont" :class="item.classType"></span>
               <p>{{ item.text }}</p>
             </div>
@@ -78,10 +78,9 @@
                 :h="item.h" 
                 :i="item.i"
                 :key="index"
-                class="box-btns-item"
                 @dblclick.native="showSeting(item, index)"
               >
-                <span>{{item.text}} <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
+                <span class="box-canvs-main-span"><div style="width: 100%; height: 100%;" v-html="item.dom"></div> <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
               </grid-item>
             </grid-layout>
           </div> 
@@ -255,14 +254,14 @@ export default {
       this.btnFromShow = false
       return true;
     },
-    addBtn(item) {
-      this.pageArray.push({ ...item, i: this.pageArrayCount })
+    addCpns(item) {
+      console.log(item)
+      this.pageArray.push({ w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[-1] || 1, i: this.pageArrayCount, ...item })
     },
     removeBtn(index){
       this.pageArray.splice(index, 1)
     },
     showSeting(item, index) {
-      console.log(item, 'xxxxxxxxxxx')
       if (Object.keys(item).length == 0) return 
       this.currentCpn = index
       const from = { ...item }
@@ -378,8 +377,12 @@ export default {
       border-radius: 4px;
       overflow-y: scroll;
       &::-webkit-scrollbar {
-      display: none;
-    }
+        display: none;
+      }
+      .box-canvs-main-span {
+        position: relative;
+        
+      }
     }
   }
   &-set {