test

src/views/tool.vue

 <template>
   <div id="tool">
-    <div class="cropper">
+    <div class="cropper" v-show="cropperShow">
                 <vueCropper
                     ref="cropper"
                     :img="option.img"
@@ -18,6 +18,7 @@
                     @realTime="realTime"
                     @imgLoad="imgLoad"
                 ></vueCropper>
+                <div @click="cropperShow=false">完成</div>
             </div>
     <div class="preview-box">
         <div>预览：</div>
@@ -215,6 +216,7 @@ export default {
                 fixedBox: false // 截图框固定大小
             }, 
             previews: {},
+            cropperShow: false,
 
 
       posterUrl: '',
@@ -481,9 +483,11 @@ export default {
                     me.uploadPic = 'data:image;base64,' + res.localData
 
                     me.option.img = me.uploadPic
+                    this.cropperShow = true
                   }else{
                     me.uploadPic = res.localData // localData是图片的base64数据，可以用img标签显示
                   
+                    this.cropperShow = true
                     me.option.img = me.uploadPic
                   }
                 }
@@ -558,6 +562,14 @@ export default {
         width: 100%;
       }
     }
+    .cropper{
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 9999;
+    }
   }
   #posterCon{
     padding: 10px 35.5px 0;