报表浏览页面增加加载状态和显示控制

src/components/jimureport/browse.vue

@@ -1,11 +1,15 @@
 <template>
-  <iframe
-    :src="url"
-    width="100%"
-    style="height: calc(100vh - 100px)"
-    frameborder="0"
-    allowfullscreen="true"
-  ></iframe>
+  <div v-loading="loading" >
+    <iframe
+      :src="url"
+      width="100%"
+      style="height: calc(100vh - 100px)"
+      frameborder="0"
+      allowfullscreen="true"
+      v-show="isShow"
+      ref="Iframe"
+    ></iframe>
+  </div>
 </template>
 
 <script>
@@ -14,9 +18,21 @@
       url: ''
     },
     data() {
-      return {};
+      return {
+        loading: false,
+        isShow: false
+      };
+    },
+    created() {
+      this.loading = true;
+      this.isShow = false;
+      this.$nextTick(() => {
+        this.$refs.Iframe.onload = () => {
+          this.loading = false;
+          this.isShow = true;
+        };
+      });
     },
-
     methods: {}
   };
 </script>