feat: 新增预览功能

README.md

@@ -4,17 +4,16 @@
 
 基于 vue 可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。
 
-
 文档地址：[https://was666.gitee.io/as-editor-doc](https://was666.gitee.io/as-editor-doc)
 
 在线体验：[http://was666.gitee.io/as-editor](http://was666.gitee.io/as-editor)
 
 #### 安装教程
 
-1.  npm install   （安装 node_modules 模块）
+1.  npm install （安装 node_modules 模块）
 2.  npm run serve （运行）
 3.  npm run build （打包）
-4.  npm update     (用于更新包到基于规范范围的最新版本)
+4.  npm update (用于更新包到基于规范范围的最新版本)
 
 #### 使用说明
 
@@ -24,12 +23,12 @@
 ![步骤2](https://images.gitee.com/uploads/images/2021/1027/112939_e466bef2_5546746.png 'image2.png')
 ![步骤3](https://images.gitee.com/uploads/images/2021/1027/112950_60be2a1a_5546746.png 'image3.png')
 ![步骤4](https://images.gitee.com/uploads/images/2021/1027/113000_117378e7_5546746.png 'image4.png')
-![步骤5](https://images.gitee.com/uploads/images/2021/1101/173304_1e88f8bb_5546746.png "image5.png")
+![步骤5](https://images.gitee.com/uploads/images/2021/1101/173304_1e88f8bb_5546746.png 'image5.png')
-![步骤6](https://images.gitee.com/uploads/images/2021/1101/173318_fee90ec7_5546746.png "image6.png")
+![步骤6](https://images.gitee.com/uploads/images/2021/1101/173318_fee90ec7_5546746.png 'image6.png')
 
 ##### 自定义组件可以看：
 
-```js
+```
 src / layout / home / index.vue                 // 编辑页面文件
 src / components / sliderassembly / index.vue   // 左侧组件大全文件
 src / components / componentscom                // 左侧组件目录

src/components/headerTop/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="headerTop"
+    :style="{
+      height: pageSetup.titleHeight + 'px',
+    }"
+  >
+    <!-- 左半部分 -->
+    <div class="lef" v-show="pageSetup.isBack">
+      <van-icon name="arrow-left" />
+    </div>
+    <!-- 标题 -->
+    <div
+      class="header-title"
+      :style="{
+        height: pageSetup.titleHeight + 'px',
+        'line-height': pageSetup.titleHeight + 'px',
+      }"
+    >
+      {{ pageSetup.name }}
+    </div>
+    <!-- 右半部分 -->
+    <div class="rig" v-show="pageSetup.isPerson">
+      <span>个人中心</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'headerTop',
+  props: {
+    pageSetup: Object,
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.headerTop {
+  height: 35px;
+  width: 100%;
+  background: #fff;
+  display: flex;
+  padding: 0 5px;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 1px solid #f7f8fa;
+  position: relative;
+  /* 左边 */
+  .lef {
+    position: absolute;
+    left: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    /* 图标 */
+    span {
+      color: #000;
+      font-weight: 400;
+      font-size: 12px;
+    }
+  }
+  .header-title {
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    line-height: 35px;
+    color: #333333;
+  }
+  /* 右边 */
+  .rig {
+    // display: flex;
+    // align-items: center;
+    // height: 100%;
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    /* 搜索图标 */
+    i {
+      font-size: 18px;
+      margin: 0 7px 5px;
+    }
+
+    /* 文字 */
+    span {
+      margin: 0 7px;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/components/phoneBottom/index.vue

@@ -1,18 +1,14 @@
 <template>
-  <div class="phoneBottom">
+  <div class="phoneBottom"></div>
-    <p class="ft-links" v-show="datas.isShowBootom">
-    </p>
-  </div>
 </template>
 
 <script>
 export default {
   name: 'phoneBottom',
-  props:['datas'],
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 .phoneBottom {
   width: 100%;
   background-color: #fff;
@@ -20,32 +16,5 @@ export default {
   cursor: pointer;
   padding-top: 30px;
   box-sizing: border-box;
-  .ft-links {
-    text-align: center;
-    padding: 0px 15px 10px;
-    span {
-      padding: 0 6px;
-      color: #666;
-      font-size: 12px;
-      border-right: 1px solid #e5e5e5;
-      &:last-of-type {
-        border-right: 0;
-      }
-    }
-  }
-
-  .yinjia {
-    color: #bfbfc3;
-    text-align: center;
-    font-size: 11px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .logo {
-      width: 15px;
-      height: 15px;
-      margin-right: 5px;
-    }
-  }
 }
 </style>

src/components/realTimeView/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="RealTimeView">
+    <el-dialog :visible.sync="datas.show" width="414px" top="8vh">
+      <img src="@/assets/images/phoneTop.png" style="width: 375px" />
+      <iframe
+        v-if="datas.show"
+        ref="iframe"
+        class="screen"
+        :scrolling="false"
+        :src="'http://was666.gitee.io/as-editor-h5/#/?type=iframe'"
+        @load="load"
+      ></iframe>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RealTimeView',
+  props: {
+    datas: {
+      show: false,
+    },
+    val:Object
+  },
+  methods: {
+    load() {
+      this.$refs["iframe"].contentWindow.postMessage(this.val, "*");
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.RealTimeView {
+  .screen {
+    width: 375px /*no*/;
+    height: 667px /*no*/;
+    border: 0;
+
+    // 隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none; /* Chrome Safari */
+    }
+  }
+}
+</style>

src/layout/home/index.vue

@@ -17,10 +17,18 @@
         <el-button @click="reloads" type="danger"
           ><i class="el-icon-delete-solid el-icon--left"></i>重置</el-button
         >
+        <el-button @click="realTimeView.show = true">预览</el-button>
         <el-button @click="catJson">查看JSON </el-button>
-        <el-button @click="$refs.file.click()" >导入JSON </el-button>
+        <el-button @click="$refs.file.click()">导入JSON </el-button>
         <el-button @click="exportJSON">导出JSON </el-button>
-        <input type="file" ref="file" id="file" accept=".json" @change="importJSON" style="display: none;" />
+        <input
+          type="file"
+          ref="file"
+          id="file"
+          accept=".json"
+          @change="importJSON"
+          style="display: none"
+        />
         <!-- <el-button @click="Preservation"
           ><i class="el-icon-s-claim el-icon--left"></i>保存</el-button
         > -->
@@ -35,36 +43,10 @@
       <!-- 手机 -->
       <div class="phone">
         <section class="phoneAll" ref="imageTofile" id="imageTofile">
-          <!-- 导航栏 -->
           <img src="@/assets/images/phoneTop.png" alt="" class="statusBar" />
 
-          <!-- 标题 -->
+          <!-- 头部导航 -->
-          <div
+          <headerTop :pageSetup="pageSetup" @click.native="headTop" />
-            class="headerTop"
-            :style="{
-              height: pageSetup.titleHeight + 'px',
-            }"
-            @click="headTop"
-          >
-            <!-- 左半部分 -->
-            <div class="lef" v-show="pageSetup.isBack">
-              <van-icon name="arrow-left" />
-            </div>
-            <!-- 标题 -->
-            <div
-              class="header-title"
-              :style="{
-                height: pageSetup.titleHeight + 'px',
-                'line-height': pageSetup.titleHeight + 'px',
-              }"
-            >
-              {{ pageSetup.name }}
-            </div>
-            <!-- 右半部分 -->
-            <div class="rig" v-show="pageSetup.isPerson">
-              <span>个人中心</span>
-            </div>
-          </div>
 
           <!-- 主体内容 -->
           <section
@@ -110,7 +92,7 @@
           <div class="phoneSize">iPhone 8手机高度</div>
 
           <!-- 底部 -->
-          <phoneBottom :datas="pageSetup.bottomLogo" />
+          <phoneBottom />
         </section>
         <!-- 底部 -->
       </div>
@@ -144,18 +126,24 @@
       <div class="decorateAll">
         <!-- 页面设置 -->
         <transition name="decorateAnima">
-          <!-- 路由缓存 -->
+          <!-- 动态组件 -->
-          <keep-alive exclude="richtextstyle">
+          <component
-            <!-- 动态组件 -->
+            :is="rightcom"
-            <component
+            :datas="currentproperties"
-              :is="rightcom"
+            @componenmanagement="componenmanagement"
-              :datas="currentproperties"
+          />
-              @componenmanagement="componenmanagement"
-            />
-          </keep-alive>
         </transition>
       </div>
     </section>
+    <realTimeView
+      :datas="realTimeView"
+      :val="{
+        id,
+        name: pageSetup.name,
+        templateJson: JSON.stringify(pageSetup),
+        component: JSON.stringify(pageComponents),
+      }"
+    />
   </div>
 </template>
 
@@ -163,7 +151,9 @@
 import utils from 'utils/index' // 方法
 import componentProperties from '@/utils/componentProperties' // 组件数据
 import sliderassembly from 'components/sliderassembly' // 左侧组件大全
+import headerTop from 'components/headerTop' // 手机底部
 import phoneBottom from 'components/phoneBottom' // 手机底部
+import realTimeView from 'components/realTimeView' // 预览组件
 
 import html2canvas from 'html2canvas' // 生成图片
 import FileSaver from 'file-saver' // 导入or导出JSON
@@ -228,6 +218,9 @@ export default {
   inject: ['reload'],
   data() {
     return {
+      realTimeView: {
+        show: false, // 是否显示预览
+      },
       id: null, //当前页面
       deleShow: true, //删除标签显示
       index: '', //当前选中的index
@@ -237,15 +230,11 @@ export default {
         // 页面设置属性
         name: '页面标题', //页面名称
         details: '', //页面描述
-        bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
-        bottomLogo: {
-          isShowBootom: false,
-          botLogo: '',
-        }, // 底部logo
         isPerson: false, // 是否显示个人中心
         isBack: true, // 是否返回按钮
-        titleHeight: 35,
+        titleHeight: 35, // 高度
-        bgImg: '',
+        bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
+        bgImg: '', // 背景图片
       },
       pageComponents: [], //页面组件
       offsetY: 0, //记录上一次距离父元素高度
@@ -255,8 +244,8 @@ export default {
   },
 
   mounted() {
-      this.pageSetup.name = '页面标题'
+    this.pageSetup.name = '页面标题'
-      this.currentproperties = this.pageSetup
+    this.currentproperties = this.pageSetup
   },
 
   methods: {
@@ -282,15 +271,6 @@ export default {
           callback: () => {},
         }
       )
-      console.log(
-        {
-          id: this.id,
-          name: this.pageSetup.name,
-          templateJson: this.pageSetup,
-          component: this.pageComponents,
-        },
-        '----------------查看JSON'
-      )
     },
     /**
      * 保存
@@ -332,7 +312,7 @@ export default {
         let url = canvas.toDataURL('image/png')
         const formData = new FormData()
         formData.append('base64File', url)
-        console.log(formData,'--------------页面图片formData')
+        console.log(formData, '--------------页面图片formData')
         loading.close()
       })
     },
@@ -634,7 +614,7 @@ export default {
         // this.result为读取到的json字符串，需转成json对象
         let ImportJSON = JSON.parse(this.result)
         // 检测是否导入成功
-        console.log(ImportJSON,'-----------------导入成功')
+        console.log(ImportJSON, '-----------------导入成功')
         // 导入JSON数据
         _this.id = ImportJSON.id
         _this.pageSetup = JSON.parse(ImportJSON.templateJson)
@@ -645,7 +625,6 @@ export default {
 
   watch: {
     /* 监听右侧属性设置切换 */
-
     rightcom(newval) {
       if (newval === 'decorate') {
         utils.forEach(this.pageComponents, (res) => {
@@ -667,6 +646,8 @@ export default {
   },
 
   components: {
+    headerTop,
+    realTimeView,
     decorate,
     componenmanagement,
     phoneBottom,
@@ -851,61 +832,6 @@ export default {
         line-height: 21px;
       }
 
-      /* 头部 */
-      .headerTop {
-        height: 35px;
-        width: 100%;
-        background: #fff;
-        display: flex;
-        padding: 0 5px;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        border-bottom: 1px solid #f7f8fa;
-        position: relative;
-        /* 左边 */
-        .lef {
-          position: absolute;
-          left: 18px;
-          top: 50%;
-          transform: translateY(-50%);
-          /* 图标 */
-          span {
-            color: #000;
-            font-weight: 400;
-            font-size: 12px;
-          }
-        }
-        .header-title {
-          width: 100%;
-          text-align: center;
-          font-size: 14px;
-          line-height: 35px;
-          color: #333333;
-        }
-        /* 右边 */
-        .rig {
-          // display: flex;
-          // align-items: center;
-          // height: 100%;
-          position: absolute;
-          right: 18px;
-          top: 50%;
-          transform: translateY(-50%);
-          /* 搜索图标 */
-          i {
-            font-size: 18px;
-            margin: 0 7px 5px;
-          }
-
-          /* 文字 */
-          span {
-            margin: 0 7px;
-            font-size: 12px;
-          }
-        }
-      }
-
       /* 状态栏 */
       .statusBar {
         width: 100%;