fix(global): 裁剪框生产环境渲染问题修复

pages/portfolio/post/_portfolio_id.vue

@@ -30,63 +30,59 @@
           </el-card>
         </el-col>
         <el-col :span="6">
-          <el-card>
+          <client-only>
-            <div>
+            <el-card>
-              <div class="cropperBox">
+              <div style="display: block;">
-                <vue-cropper
+                <div class="cropperBox">
-                  :aspect-ratio="1"
+                  <vue-cropper
-                  :autoCrop="autoCrop"
+                      :autoCrop="autoCrop"
-                  :autoCropArea="1"
+                      :img="headImgUrl"
-                  fixed
+                      ref="cropper"
-                  :fixedNumber="[1,1]"
+                      :fixed="true"
-                  :checkCrossOrigin="false"
+                      @realTime="realTime"
-                  :checkOrientation="false"
+                  />
-                  :img="headImgUrl"
+                </div>
-                  preview=".preview"
+                <div class="cropperBox">
-                  ref="cropper"
+                  <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
-                  @realTime="realTime"
+                       style="overflow:hidden;margin: 0 auto">
-                />
+                    <img :src="cropImg.url" :style="cropImg.img">
-              </div>
+                  </div>
-              <div class="cropperBox">
+                </div>
-                <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
+
-                     style="overflow:hidden;margin: 0 auto">
+                <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
-                  <img :src="cropImg.url" :style="cropImg.img">
+                <div class="portfolioDescription">
+                  {{ portfolio.portfolioDescription }}
+                </div>
+
+                <div class="button_box">
+
+                  <el-upload
+                      :before-upload="beforeAvatarUpload"
+                      :multiple="true"
+                      :show-file-list="false"
+                      action=""
+                      class="avatar-uploader">
+                    <div>
+                      <el-button plain round type="primary">上传</el-button>
+                    </div>
+                  </el-upload>
+
+                  <el-button @click="reset" style="margin-left: 10px" plain round type="primary">重置
+                  </el-button>
                 </div>
               </div>
-
+            </el-card>
-              <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
+          </client-only>
-              <div class="portfolioDescription">
-                {{ portfolio.portfolioDescription }}
-              </div>
-
-              <div class="button_box">
-
-                <el-upload
-                  :before-upload="beforeAvatarUpload"
-                  :multiple="true"
-                  :show-file-list="false"
-                  action=""
-                  class="avatar-uploader">
-                  <div>
-                    <el-button plain round type="primary">上传</el-button>
-                  </div>
-                </el-upload>
-
-                <el-button @click="reset" style="margin-left: 10px" plain round type="primary">重置
-                </el-button>
-              </div>
-            </div>
-          </el-card>
         </el-col>
       </el-row>
     </div>
     <el-col class="text-center" v-else>
       <el-alert
-        :closable="false"
+          :closable="false"
-        center
+          center
-        show-icon
+          show-icon
-        title="用户无权限"
+          title="用户无权限"
-        type="warning">
+          type="warning">
       </el-alert>
     </el-col>
   </div>
@@ -108,7 +104,7 @@ export default {
   asyncData({store, params, error}) {
     return Promise.all([
       store.dispatch('portfolio/fetchPostDetail', params)
-        .catch(err => error({statusCode: 404}))
+          .catch(err => error({statusCode: 404}))
     ])
   },
 
@@ -161,13 +157,13 @@ export default {
       cropImg: '',
       isEdit: false,
       autoCrop: true,
-      notificationFlag: true
+      notificationFlag: true,
-      , contentHtml: {}
+      contentHtml: {}
     }
   },
   methods: {
     realTime(data) {
-      this.cropImg = data
+      this.cropImg = data;
     },
     _initEditor(data) {
       //初始化
@@ -544,6 +540,4 @@ export default {
   margin-bottom: 20px;
   border: 1px solid #F2F6FC;
 }
-
-
 </style>