fix: preview margin&padding; #!zh:预览margin&padding

ly525
1 parent 9b55148b
Showing 2 changed files with 6 additions and 16 deletions
front-end/h5/src/components/core/editor/canvas/preview.js
front-end/h5/src/components/core/models/element.js
@@ -11,19 +11,12 @@ export default {
   methods: {
     renderPreview (h, elements) {
       const pageWrapperStyle = { height: this.height || '100%', position: 'relative' }
-      // 与 edit 组件保持样式一致
-      const data = {
-        style: {
-          width: '100%',
-          height: '100%'
-        }
-      }
       return (
         <div style={pageWrapperStyle}>
           {
             elements.map((element, index) => {
               return <node-wrapper element={element}>
-                {h(element.name, data)}
+                {h(element.name, element.getPreviewData({ position: 'static', isNodeWrapper: false }))}
               </node-wrapper>
             })
           }
@@ -78,7 +78,7 @@ const defaultStyle = {
   boxModelPart: '' // 可选值 margin、padding、border
 }
-class Element {
+export default class Element {
   constructor (ele) {
     this.name = ele.name
     this.uuid = ele.uuid || guid()
@@ -156,8 +156,8 @@ class Element {
       'border-color': color.value
     }
   }
-  getStyle ({ position = 'static', isRem = false } = {}) {
-    if (this.name === 'lbp-background') {
+  getStyle ({ position = 'static', isRem = false, isNodeWrapper = true } = {}) {
+    if (this.name === 'lbp-background' || !isNodeWrapper) {
       return {
         width: '100%',
         height: '100%'
@@ -217,10 +217,9 @@ class Element {
     return attrs
   }
-  getPreviewData ({ position = 'static', isRem = false, mode = 'preview' } = {}) {
-    const style = this.getStyle({ position })
+  getPreviewData ({ position = 'static', isRem = false, mode = 'preview', isNodeWrapper = true } = {}) {
     const data = {
-      style,
+      style: this.getStyle({ position, isNodeWrapper }),
       props: this.getProps({ mode }),
       attrs: this.getAttrs()
     }
@@ -240,5 +239,3 @@ class Element {
     })
   }
 }
-
-export default Element