add

src/data/component-list.js

@@ -3,26 +3,89 @@ let list = [
     name: "a-button",
     describe: "按钮",
     type: "component",
-    slot: [{ type: "text", text: "按钮" }],
+    child: [{ type: "text", text: "按钮" }],
     props: {},
     id: "customID",
     style: {
-      color: 'red',
+      color: "red",
       left: 0,
       top: 0,
       width: 80,
       height: 32,
-      zIndex: 1
+      zIndex: 1,
+    },
+  },
+  {
+    name: "a-button",
+    describe: "插槽按钮",
+    type: "component",
+    drag: true,
+    dragevent: true,
+    child: [
+      {
+        type: "component",
+        name: "a-button",
+        props: {  },
+        child: [{ type: "text", text: "插槽按钮" }],
+      },
+    ],
+    props: {},
+    id: "customID2",
+    style: {
+      color: "red",
+      left: 0,
+      top: 0,
+      width: 80,
+      height: 32,
+      zIndex: 1,
+    },
+  },
+  {
+    name: "a-row",
+    describe: "row",
+    type: "component",
+    drag: true,
+    
+    child: [
+      {
+        type: "component",
+        name: "a-col",
+        dragevent: true,
+        props: {  },
+        child: [
+          {
+            type: "component",
+            name: "a-button",
+            props: {  },
+            child: [{ type: "text", text: "插槽按钮" }],
+          },
+        ],
+        style: {
+          width: 200,
+          height: 100,
+          zIndex: 1,
+        },
+      },
+    ],
+    props: {},
+    id: "custom3ID2",
+    style: {
+      color: "red",
+      left: 0,
+      top: 0,
+      width: 200,
+      height: 200,
+      zIndex: 1,
     },
   },
   {
     name: "img",
     describe: "图片",
     type: "component",
-    slot: [],
+    child: [],
     props: {
-      draggable:"false",
+      draggable: "false",
-      src: 'https://scpic.chinaz.net/files/pic/pic9/202101/bpic22299.jpg'
+      src: "https://scpic.chinaz.net/files/pic/pic9/202101/bpic22299.jpg",
     },
     id: "imgID",
     style: {
@@ -36,7 +99,7 @@ let list = [
     name: "a-avatar",
     describe: "图片",
     type: "component",
-    slot: [],
+    child: [],
     props: {
       icon: "user",
     },
@@ -52,9 +115,9 @@ let list = [
     name: "a-input",
     describe: "输入框",
     type: "component",
-    slot: [],
+    child: [],
     props: {
-      placeholder:'请输入'
+      placeholder: "请输入",
     },
     id: "inputID",
     style: {
@@ -68,11 +131,11 @@ let list = [
     name: "a-tooltip",
     describe: "tooltip",
     type: "component",
-    slot: [
+    child: [
       {
         name: "a-button",
         type: "component",
-        slot: [{ type: "text", text: "阿萨大" }],
+        child: [{ type: "text", text: "阿萨大" }],
         props: {},
         style: {
           left: 0,
@@ -95,7 +158,7 @@ let list = [
     name: "a-cascader",
     describe: "级联选择",
     type: "component",
-    slot: [],
+    child: [],
     props: {
       options: [
         {
@@ -147,9 +210,9 @@ let list = [
     },
   },
 ];
-list = list.map(v=>{
+list = list.map((v) => {
   v.origin = JSON.parse(JSON.stringify(v.style));
-  return v
+  return v;
-})
+});
 
 export default list;

src/main.js

@@ -14,6 +14,9 @@ Vue.config.productionTip = process.env.NODE_ENV === 'production' ? true : false;
 Vue.use(toast);
 
 Vue.prototype.$computeStyle= function(style,isDefault=false){
+  if(!style){
+    return {}
+  }
   let myStyle = cloneDeep(style);
   let attr = ["left", "width", "height", "top", "right", "bottom"];
   let attrStr = ["backgroundColor", "color","position",'zIndex'];

src/ui/detail/detail.vue

@@ -3,6 +3,7 @@
     <div v-if="currentDetail">
       <a-input v-model.number="currentDetail.style.left" @blur="blur" />
       <a-input v-model.number="currentDetail.style.top" @blur="blur" />
+      <a-input v-model.number="currentDetail.style.zIndex" @blur="blur" />
       <a-input v-for="(item,index) in keys" :key="index" v-model.number="currentDetail.props[item]" @blur="blur" />
     </div>
     {{ currentDetail }}--{{ currentIndex }}

src/ui/editor/Shape.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 <script>
-import componentList from "@/data/component-list";
+
 export default {
   inject: ["active"],
   props: ["index"],

src/ui/editor/customComponent.vue

@@ -1,19 +1,32 @@
 <template>
   <component
-      class="component"
+    class="component"
-      :is="detail.name"
+    :is="detail.name"
-      v-if="detail.type == 'component'"
+    v-if="detail.type == 'component'"
-      v-bind="detail.props"
+    v-bind="detail.props"
-      v-on="detail.methods"
+    v-on="methods"
-    >
+   :style="[$computeStyle(detail.style, true)]"
-      <template v-for="(child, childIndex) in detail.slot">
+  >
-        <template v-if="child.type == 'text'"> {{ child.text }}</template>
+    <template v-for="(child, childIndex) in detail.child">
-        <customComponent v-if="child.type == 'component'" :detail="child" :key="childIndex" />
+      <template v-if="child.type == 'text'"> {{ child.text }}</template>
+      <customComponent
+        v-if="child.type == 'component'"
+        :detail="child"
+        :key="childIndex"
+      />
+      <template v-if="child.type == 'slot'">
+        <template v-for="(slot, slotIndex) in detail.slots" :slot="slot.name || 'default'">
+          {{slotIndex}}
+        </template>
       </template>
-    </component>
+    </template>
+  </component>
 </template>
 <script>
+import componentList from "@/data/component-list";
+import {cloneDeep} from "lodash";
 export default {
+  inject: ["active"],
   name: "customComponent",
   props: {
     detail: {
@@ -21,6 +34,42 @@ export default {
       default: () => {},
     },
   },
+  computed: {
+    methods(){
+      return Object.assign(this.detail.methods||{},this.detail.dragevent?{
+        drop: this.drop,
+        dragover: this.dragover,
+        click: this.click,
+      }:{})
+    }
+  },methods:{
+    click(){
+
+    },
+    drop(ev){
+      console.log(ev);
+      ev.stopPropagation()
+      ev.preventDefault()
+      try {
+        var { id, x, y } = JSON.parse(
+          decodeURIComponent(ev.dataTransfer.getData("component-transfer"))
+        );
+        let offsetX = ev.offsetX - x;
+        let offsetY = ev.offsetY - y;
+        let el = cloneDeep(componentList.filter((v) => v.id === id)[0]);
+        el.style.left = offsetX;
+        el.style.top = offsetY;
+        this.detail.child.push(el);
+      } catch (error) {
+        console.warn(error);
+      }
+    },
+    dragover(ev){
+      console.log(ev);
+      ev.stopPropagation()
+      ev.preventDefault()
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

src/ui/editor/editor.vue

@@ -17,6 +17,7 @@
       :class="[
         movingIndex == index ? 'moving' : '',
         movingIndex != -1 && movingIndex != index ? 'staying' : '',
+        item.drag?'candrag':''
       ]"
       :key="index"
       @update="update"
@@ -26,7 +27,7 @@
       :style="[$computeStyle(item.style)]"
     >
       <customComponent
-        :style="[$computeStyle(item.style, true)]"
+        
         :detail="item"
         :key="index"
       />
@@ -74,6 +75,8 @@ export default {
       // 更新了组件状态
       this.$refs.makeline.listenerChange(this.componentList, index);
       this.$event.$emit("@editor:notice:update", item, index);
+       this.history.push(cloneDeep(this.componentList));
+        this.current = this.history.length - 1;
     });
     this.$event.$on("@editor:publish:chexiao", () => {
       if (this.current - 1 >= 0) {
@@ -229,7 +232,7 @@ export default {
   overflow: hidden;
   &.dragging {
     border-color: red;
-    * {
+    :not(.candrag) {
       pointer-events: none;
       user-select: none;
     }