fix clip bug

src/App.vue

@@ -75,8 +75,8 @@ export default {
 }
 .child-view {
   transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
-  -webkit-overflow-scrolling: touch;
-  position: absolute;
+  // -webkit-overflow-scrolling: touch;
+  // position: absolute;
   width: 100%;
   min-height: 100vh;
 }

src/views/tempaltes/editMenu.vue

@@ -113,7 +113,7 @@
       @changeSelcetData="changeSelcetData"
       v-if="selectData.show"
     ></selectDataCom>
-    <div class="cropper-container" v-show="VueCropperOption.img">
+    <div class="cropper-container" v-if="VueCropperOption.img">
       <vueCropper
         ref="cropper"
         :img="VueCropperOption.img"
@@ -151,6 +151,10 @@ export default {
       type: Object,
       default: () => {}
     },
+    isIos: {
+      type: Boolean,
+      default: true
+    },
     schemaData: {
       type: Object,
       default: () => {}
@@ -159,7 +163,7 @@ export default {
   components: {
     selectDataCom,
     VueCropper
-  },
+  },    
   created() {
     console.log(this.schemaData);
   },
@@ -248,6 +252,7 @@ export default {
     uploadAfter(file) {
       // console.log(file);
       if (String(file.file.type).indexOf("image") !== -1) {
+        this.$emit("setClipImg", true)
         this.VueCropperOption.img = file.content;
       } else {
         this.uploadFile(file.file);
@@ -270,6 +275,7 @@ export default {
       this.$emit("setList", this.schemaData);
     },
     saveCropper() {
+      this.$emit("setClipImg", false)
       this.VueCropperOption.img = "";
       this.$refs.cropper.getCropBlob(data => {
         console.log(data);
@@ -304,19 +310,26 @@ export default {
 .menu-container {
   height: calc(100vh - 570px);
   padding: 15px;
+  position: static;
+  box-sizing: border-box;
+  // overflow: scroll;
 
   .cropper-container {
+    display: flex;
+    flex-direction: column;
     background-color: #666;
-
-    overflow: auto;
     top: 0;
     left: 0;
-    width: 100%;
-    position: fixed;
-    height: 100%;
-    z-index: 100000;
+    bottom: 0;
+    right: 0;
+    width: 100vw;
+    position: absolute;
+    height: 100vh;
+    // overflow: hidden;
+    z-index: 10000000;
     .vue-cropper {
       height: calc(100vh - 84px);
+      z-index: 100000000;
     }
     .save-img-btn {
       width: 294px;
@@ -334,6 +347,7 @@ export default {
       border-radius: 30px;
       text-align: center;
       color: white;
+      z-index: 1000000;
     }
   }
   .image {

src/views/tempaltes/editMore.vue

@@ -131,6 +131,7 @@
     <div class="content" v-show="gifloaded">
       <div
         class="content-left"
+        v-show="!clipImg"
         :class="{'content-left-v': templateData.templateShow === 'VERTICAL' }"
       >
         <div class="content-left-top">
@@ -150,10 +151,18 @@
           <!-- <van-button size="mini" @click="pageShow">页面排序</van-button> -->
           <!-- <van-button size="mini" @click="preview">预览</van-button> -->
         </div>
+        <iframe
+          style="height: 0px;width: 100%;"
+          v-if="isIos"
+          v-show="false"
+          @load="iframetestLoad"
+          scrolling="no"
+          :src="templateData.frameUrl+'?isEdit=1'"
+          frameborder="0"
+        ></iframe>
         <div
           class="iframe-container"
           :style="!isIos ? 'width: 100vw' : ''"
-
           :class="{'iframe-container2': templateData.templateShow === 'VERTICAL', isIos: isIos }"
         >
           <iframe
@@ -168,21 +177,14 @@
             frameborder="0"
           ></iframe>
         </div>
-        <iframe
-          style="height: 0px;width: 100%;"
-          v-if="isIos"
-          v-show="false"
-          scrolling="no"
-          :src="templateData.frameUrl+'?isEdit=1'"
-          frameborder="0"
-        ></iframe>
+
         <!-- 
           :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + time"
           https://visual-clouds.bdideal.com/html/test2.html
           :src="'https://127.0.0.1:9000/template.html' + '?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
         :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"-->
       </div>
-      <div class="content-menu">
+      <div class="content-menu" v-show="!clipImg">
         <slider :list="templateData.listData">
           <div
             class="menu-item"
@@ -194,7 +196,7 @@
           </div>
         </slider>
       </div>
-      <div class="group-menu" v-if="templateData.listData[currentPage]">
+      <div class="group-menu" v-if="templateData.listData[currentPage]" v-show="!clipImg">
         <slider :list="templateData.listData[currentPage].itemList">
           <div
             class="group-menu-item"
@@ -206,21 +208,23 @@
       </div>
       <div class="content-right">
         <!-- <div class="title">编辑栏</div> -->
-        <div class="edit-area">
+        <div class="edit-area" :class="{'fixed-edit-area': clipimg}">
           <div v-if="templateData.listData[currentPage]">
             <editMenu
               v-if="loaded "
+              :isIos="this.isIos"
               :itemList="templateData.listData[currentPage].itemList"
               :item="templateData.listData[currentPage].itemList[itemListIndex]"
               :schemaData="templateData.listData[currentPage].schemaData"
               :frameUrl="templateData.frameUrl"
               @setList="setList"
+              @setClipImg="setClipImg"
             ></editMenu>
           </div>
         </div>
       </div>
     </div>
-    <div class="createBtn" v-show="gifloaded">
+    <div class="createBtn" v-show="gifloaded && !clipImg">
       <van-button type="info" @click="enterSubmit" style="width: 100%">发布</van-button>
     </div>
     <van-action-sheet v-model="showSheet" :round="true" :actions="actions" @select="onSheetSelect" />
@@ -303,6 +307,7 @@ export default {
         defaultData: [],
         templateInfo: {}
       },
+      clipImg: false,
       editObj: {},
       editIndex: "",
       editPage: "",
@@ -337,9 +342,9 @@ export default {
     let ua = window.navigator.userAgent;
     //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
     if (ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
-      this.isIos = true
+      this.isIos = true;
     } else {
-      this.isIos = false
+      this.isIos = false;
     }
     window.onunload = function() {
       window.wx.miniProgram.navigateBack({});
@@ -457,6 +462,9 @@ export default {
         pages: this.templateData.listData
       });
     },
+    setClipImg(show) {
+      this.clipImg = show
+    },
     goPage(index) {
       this.currentPage = index;
       console.log(index);
@@ -551,6 +559,9 @@ export default {
         type: "cancelEdit"
       });
     },
+    iframetestLoad() {
+      this.loaded = true;
+    },
     iframeLoad() {
       this.setList();
     },
@@ -598,7 +609,9 @@ export default {
               var pagesData = res.data.pageList;
               this.templateData.defaultData = pagesData;
             });
-          this.loaded = true;
+          if (!this.isIos) {
+            this.loaded = true;
+          }
           this.$toast("数据加载完成");
           setTimeout(() => {
             window.frames["tiframe"].location.reload();
@@ -617,10 +630,13 @@ export default {
         this.templateData.frameUrl = res.data.frameUrl;
         this.templateData.filmDescribe = res.data.templateDescribe;
         this.templateData.templateShow = res.data.templateShow;
-        this.loaded = true;
+        if (!this.isIos) {
+          this.loaded = true;
+        }
         this.$toast("数据加载完成");
         setTimeout(() => {
           window.frames["tiframe"].location.reload();
+          console.log("reload");
         }, 500);
         axios
           .get(
@@ -773,6 +789,7 @@ export default {
   box-sizing: border-box;
   padding-bottom: 80px;
   position: relative;
+  z-index: 1;
 
   .page-content-tips {
     text-align: center;
@@ -1051,6 +1068,8 @@ export default {
       }
     }
     .content-right {
+      // position: relative;
+      // z-index: 10;
       // width: 300px;
       text-align: left;
 
@@ -1064,6 +1083,18 @@ export default {
         margin-bottom: 10px;
         border-bottom: 1px solid #dddddd;
       }
+      // .fixed-edit-area {
+      //   position: fixed;
+      //   top: 0;
+      //   right: 0;
+      //   left: 0;
+      //   bottom: 0;
+      //   z-index: 1000;
+      //   height: 100vh;
+      //   .menu-container {
+      //     height: 100vh !important;
+      //   }
+      // }
       .edit-area {
         padding-top: 10px;
         padding-bottom: 20px;
@@ -1307,7 +1338,7 @@ export default {
     padding: 10px 40px;
     padding-bottom: 10px;
     display: flex;
-    z-index: 1000;
+    // z-index: 1;
     justify-content: space-between;
     background: white;
     box-sizing: border-box;