feat: 增加容器之间四边边距调整

app/web/page/editor/component/DynamicForm/index.ts

@@ -22,6 +22,9 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
   @State(state => state.editor.curChildIndex) curChildIndex;
   @Getter('pageData') pageData;
 
+  prevCommonStyle: object = {
+    paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0
+  };
   form: object = {};
   styleSchame: object = {
     curEle: [
@@ -132,7 +135,23 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
       },
       {
         label: '背景颜色'
-      }
+      },
+      {
+        label: '上边距',
+        key: 'paddingTop'
+      },
+      {
+        label: '下边距',
+        key: 'paddingBottom'
+      },
+      {
+        label: '左边距',
+        key: 'paddingLeft'
+      },
+      {
+        label: '右边距',
+        key: 'paddingRight'
+      },
     ]
   };
 
@@ -141,11 +160,12 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
   }
 
   get point() {
+    console.log(this.curEleIndex || this.curEleIndex === 0 ? cloneDeep(this.pageData.elements[this.curEleIndex]?.point) : { h: 0, w: 0 });
     return this.curEleIndex || this.curEleIndex === 0 ? cloneDeep(this.pageData.elements[this.curEleIndex]?.point) : { h: 0, w: 0 };
   }
 
   get commonStyle() {
-    let rs = { backgroundColor: '', backgroundImage: '' };
+    let rs = { backgroundColor: '', backgroundImage: '', paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 };
     if (this.curEleIndex || this.curEleIndex === 0) {
       if (this.curChildIndex || this.curChildIndex === 0) {
         rs = cloneDeep({ ...rs, ...this.pageData.elements[this.curEleIndex].child[this.curChildIndex].commonStyle });
@@ -314,4 +334,13 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
     }
     this.updatePageInfo({ containerIndex: this.curEleIndex, childIndex: this.curChildIndex, data: { ...elements, commonStyle: { ...elements.commonStyle, left, top } } });
   }
+
+  changeMargin() {
+    // this.point.w = this.point.w - (this.commonStyle.paddingLeft || 0) - (this.commonStyle.paddingRight || 0);
+    this.point.h = this.point.h - (this.prevCommonStyle.paddingTop || 0) - (this.prevCommonStyle.paddingBottom || 0) + (this.commonStyle.paddingTop || 0) + (this.commonStyle.paddingBottom || 0);
+    this.updateCommonStyle({ containerIndex: this.curEleIndex, childIndex: this.curChildIndex, data: this.commonStyle });
+    this.prevCommonStyle = cloneDeep(this.commonStyle);
+    this.updatePoint();
+    // this.adjustHeight();
+  }
 }
\ No newline at end of file

app/web/page/editor/component/DynamicForm/index.vue

@@ -48,6 +48,9 @@
               <InputNumber class="Df-basic-inputnumber" :max="375" :min="0" v-model="point.w" @on-change="updatePoint($event, 'w')"></InputNumber>
               <InputNumber :max="667" :min="0" v-model="point.h" @on-change="updatePoint($event, 'h')"></InputNumber>
             </template>
+            <template v-else-if="item.label.indexOf('边距') > -1">
+              <Slider v-model="commonStyle[item.key]" @on-change="changeMargin" />
+            </template>
             <upload v-else-if="item.label === '背景图片'" v-model="commonStyle.backgroundImage" @change="updateStyle($event, 'backgroundImage')"></upload>
             <ColorSelector v-else-if="item.label === '背景颜色'" v-model="commonStyle.backgroundColor" @input="updateStyle($event, 'backgroundColor')"></ColorSelector>
             <template v-else>