修改

src/views/doc/components/browse.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="browse">
+  <div class="browse" v-loading="loading">
     <span class="fullscreen" v-if="fileType == 1" @click="showEditFlag = true">
       <i class="el-icon-full-screen"></i>
       全屏
@@ -10,6 +10,8 @@
       style="height: calc(70vh - 280px); margin-top: 30px"
       frameborder="0"
       allowfullscreen="true"
+      ref="Iframe"
+      v-show="isShow"
     ></iframe>
     <ele-modal
       :visible.sync="showEditFlag"
@@ -38,18 +40,31 @@
       return {
         fileType: 1,
         fileUrl: '',
-        showEditFlag: false
+        showEditFlag: false,
+        loading: false,
+        isShow: false
       };
     },
 
     methods: {
       setFileUrl(row) {
+        this.loading = true;
         this.fileUrl = '';
-        setTimeout(() => {
-          let file = row.storagePath[0];
-          let fileNames = file.storePath.split('/');
-          let url =window.location.origin +'/api/main/file/getFile?objectName=' +file.storePath +'&fullfilename=' +fileNames[fileNames.length - 1];
-          this.fileUrl = '/kkfile/onlinePreview?url=' + btoa(url);
+        this.isShow = false;
+        let file = row.storagePath[0];
+        let fileNames = file.storePath.split('/');
+        let url =
+          window.location.origin +
+          '/api/main/file/getFile?objectName=' +
+          file.storePath +
+          '&fullfilename=' +
+          fileNames[fileNames.length - 1];
+        this.fileUrl = '/kkfile/onlinePreview?url=' + btoa(url);
+        this.$nextTick(() => {
+          this.$refs.Iframe.onload = () => {
+            this.loading = false;
+            this.isShow = true;
+          };
         });
       }
     }
@@ -58,6 +73,7 @@
 <style scoped lang="scss">
   .browse {
     position: relative;
+    min-height: 200px;
     .fullscreen {
       position: absolute;
       top: 10px;