refactor(preview): Unified preview module; !#zh: 统一的预览模块

ly525
1 parent 8068fc05
Showing 2 changed files with 7 additions and 17 deletions
front-end/h5/src/components/core/editor/canvas/preview.js
front-end/h5/src/engine-entry.js
@@ -3,14 +3,15 @@ import NodeWrapper from &#39;@/components/preview/node-wrapper.js&#39;
  * TODO extract page preview card used for page list
  */
 export default {
-  props: ['elements'],
+  props: ['elements', 'height'],
   components: {
     NodeWrapper
   },
   methods: {
     renderPreview (h, elements) {
+      const pageWrapperStyle = { height: this.height || '100%', position: 'relative' }
       return (
-        <div style={{ height: '100%', position: 'relative' }}>
+        <div style={pageWrapperStyle}>
           {
             elements.map((element, index) => {
               return <node-wrapper element={element}>
@@ -21,6 +21,7 @@ import &#39;ant-design-vue/lib/message/style/css&#39; // 加载 CSS
 import { pluginsList } from './mixins/load-plugins.js'
 import { PAGE_MODE } from './constants/work.js'
 import Element from './components/core/models/element'
+import RenderPreview from '@/components/core/editor/canvas/preview'
 import NodeWrapper from '@/components/preview/node-wrapper.js'
 Vue.config.productionTip = true
@@ -61,22 +62,10 @@ const Engine = {
       )
     },
     renderPreview (pageElements = []) {
-      const pageWrapperStyle = this.isLongPage ? {
-        height: window.__work.height + 'px'
-      } : {}
-
+      const height = this.isLongPage ? window.__work.height + 'px' : '100%'
       const elements = pageElements.map(element => new Element(element))
-      return (
-        <div style={pageWrapperStyle}>
-          {
-            elements.map((element, index) => {
-              return <node-wrapper element={element}>
-                {this.$createElement(element.name, element.getPreviewData({ position: 'static' }))}
-              </node-wrapper>
-            })
-          }
-        </div>
-      )
+      // src/components/core/editor/canvas/preview
+      return <RenderPreview elements={elements} height={height} />
     },
     getContainerStyle (work) {
       const containerStyle = {