From b8f95eefabf98aa446a388bb4cec8783dd9298db Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 15 Jun 2021 18:17:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=84=E8=A7=88=E5=92=8C=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=9B=B8=E5=90=8C=E7=9A=84gap=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Editor/ComponentWrapper.vue    | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index ff904a47d8..285c7ed2d8 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -1,24 +1,25 @@
 <template>
-  <div @click="handleClick">
+  <div
+    :style="getOutStyleDefault(config.style)"
+    :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
+    class="component"
+    @click="handleClick"
+  >
     <component
       :is="config.component"
       v-if="config.type==='custom'"
       :id="'component' + config.id"
-      class="component"
-      :style="getStyle(config.style)"
+      :style="getComponentStyleDefault(config.style)"
       :out-style="config.style"
       :element="config"
-      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     />
     <component
       :is="config.component"
       v-else
-      class="component"
       :out-style="config.style"
-      :style="getStyle(config.style)"
+      :style="getComponentStyleDefault(config.style)"
       :prop-value="config.propValue"
       :element="config"
-      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     />
   </div>
 </template>
@@ -54,6 +55,26 @@ export default {
   methods: {
     getStyle,
 
+    getOutStyleDefault(style) {
+      const result = {};
+      ['width', 'left'].forEach(attr => {
+        result[attr] = style[attr] + 'px'
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = style[attr] + 'px'
+      })
+      result['rotate'] = style['rotate']
+      result['opacity'] = style['opacity']
+
+      return result
+      // return style
+    },
+
+    getComponentStyleDefault(style) {
+      return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      // return style
+    },
+
     handleClick() {
       const events = this.config.events
       Object.keys(events).forEach(event => {
@@ -68,4 +89,8 @@ export default {
 .component {
     position: absolute;
 }
+
+.gap_class{
+  padding:3px;
+}
 </style>