提交

src/components/PdfPreview/view.vue

@@ -33,11 +33,16 @@
       <el-button @click="nextPage('footer')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button> -->
       <el-button type="primary" @click="clickMore()"  v-if="moreState == 1">加载更多</el-button>
     </div>
-
-    <div v-if="moreState == 1" class=" xcontent postfixt-bot">
-     <interactBar  :data="data" :type="3" :comments="false" :shares="true"></interactBar>
-      <el-button>返回顶部</el-button>
-    </div>
+    <!-- <div v-if="likeBox" class="xcontent postfixt-bot">
+      <div class="postfixt-bot-box">
+        <div style="display:inline-block">
+           <interactBar  :data="data" :type="3" :comments="false" :shares="true"></interactBar>
+        </div>
+        <div style="display:inline-block;margin: 0 20px;">
+          <el-button type="primary" @click="goTop()">返回顶部</el-button>
+        </div>
+      </div>
+    </div> -->
   </div>
 </template>
 
@@ -60,11 +65,16 @@ export default {
       default: false,
     },
     data:{
-      type:Array,
+      type:Object,
+    },
+    boxShow:{
+      type: Boolean,
+      default: true,
     }
   },
   data() {
     return {
+      likeBox:false,
       src: "",
       showPages: undefined,
       totalPages:0,
@@ -96,6 +106,13 @@ export default {
        this.loadInitPdf(newVal);
       }
     },
+    boxShow(newVal){
+      if(newVal){
+       this.likeBox = true;
+      } else {
+       this.likeBox = false;
+      }
+    },
     loadedRatio(newVal){
       // 直接使用loadedRatio控制进度条没有加载效果
       if(newVal == 1){
@@ -107,13 +124,15 @@ export default {
     }
   },
   methods: {
+    goTop() {
+     document.documentElement.scrollTop = 0;
+     this.likeBox = false;
+    },
     loadProgress(e){
        console.log(e,'loadProgress');
     },
     loadedPageHandle(e){
-       console.log(e,'loadedPageHandle');
        this.pdfpage = e;
-
     },
     loadPdfHandle(e){
        console.log(e,'loadPdfHandle');
@@ -123,33 +142,24 @@ export default {
           this.showPages++;
        }
       this.isscroll = true;
-     
-    },     
+      this.likeBox = true;
+    },
     //加载页面
     loadInitPdf(url) {
-     
       if(url && url.indexOf('.pdf')>-1){
         let loadingTask = pdf.createLoadingTask(url);
         this.src=loadingTask;
-        
         loadingTask.promise.then((pdf) =>{
-           console.log(pdf)
             this.totalPages=pdf.numPages;
-          
-
             if(pdf.numPages>this.initNum){
               this.showPages = this.initNum;
-             
             } else{
               this.showPages =pdf.numPages;
-            
             }
-            
-            
           }).catch((err) =>{
             this.$message.error("加载内容失败,请联系管理员");
           });
-         
+
       }
     },
 
@@ -158,19 +168,17 @@ export default {
       let innerHeight = document.querySelector('#pdf-perView').clientHeight
       let outerHeight = document.documentElement.clientHeight
       let scrollTop = document.documentElement.scrollTop
-     
         if(this.isscroll){
           this.showPages++;
           this.moreState = 2;
           this.debounce(this.loadInitPdf(),5000);
-          
       }
-    //  console.log(this.pdfpage,'000')
-    // console.log(this.totalPages,this.pdfpage)
      if(this.pdfpage >= this.totalPages){
         this.isscroll = false;
         this.moreState = 3;
-        // console.log('hcuewhf')
+     }
+     if(this.pdfpage < 4){
+       this.likeBox = false;
      }
         //  if(scrollTop > 400) {
         //   document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
@@ -178,8 +186,8 @@ export default {
         //   document.querySelector('#articleAnking').style.cssText = "position: static";
         // }
   },
-   
-    
+
+
     debounce(func, wait) {// 非立即执行
     let timeout;
     return function () {
@@ -234,14 +242,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.postfixt-bot{
-  height: 100px;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  background-color: #666;
-  z-index: 999;
-}
+// .postfixt-bot{
+//   height: 60px;
+//   line-height: 60px;
+//   width: 750px;
+//   position: fixed;
+//   bottom: 0;
+//   background-color: #fff;
+//   border: 1px solid #eee;
+//   z-index: 999;
+//   .postfixt-bot-box{
+//     text-align: right;
+//   }
+// }
 .pdf-perView {
   .pdf-box {
     min-height: 300px;