pdf loading

src/components/Adult/preview/PdfView.vue

@@ -1,14 +1,22 @@
 <template>
-  <div class="pdfView">
-    <pdf
-      ref="pdf"
-      :src="curQue.data.fileRelativePath"
-      v-for="i in curQue.data.numPages"
-      :key="i"
-      :page="i"
-    >
-    </pdf>
-  </div>
+    <div class="pdfView-box">
+        <div class="pdfView">
+            <pdf
+                ref="pdf"
+                :src="curQue.data.fileRelativePath"
+                v-for="i in curQue.data.numPages"
+                :key="i"
+                :page="i"
+                @progress="loadedRatio = $event"
+            >
+            </pdf>
+        </div>
+        <div class="progress" v-show="loadedRatio!==1">
+            <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio*100)"></el-progress>
+            <br/>
+            <span>{{remindShow}}</span>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -25,6 +33,8 @@ export default {
     //这里存放数据
     return {
       numPages: null,
+      remindShow: "加载文件中，文件较大请耐心等待...",
+      loadedRatio: 0,
     };
   },
   //计算属性 类似于data概念
@@ -75,7 +85,18 @@ export default {
 </script>
 <style scoped>
 /* @import url(); 引入css类 */
+.pdfView-box{
+    width:100%;
+}
 .pdfView {
   width: 100%;
 }
+.progress{
+    position: absolute;
+    right: 50%;
+    top: 50%;
+    text-align: center;
+    width: 500px;
+    margin-right: -250px;
+}
 </style>