瀏覽代碼

feat: 解决最后一个不能翻页的问题

Damon 7 月之前
父節點
當前提交
55ffb109da
共有 1 個文件被更改,包括 28 次插入56 次删除
  1. 28 56
      src/pages/explain/index_pdf.vue

+ 28 - 56
src/pages/explain/index_pdf.vue

@@ -1,15 +1,31 @@
 <template>
+  <!-- npm install vue-pdf@4.3.0 -->
+  <!-- npm install vue-pdf@1.0.2 -->
   <!-- pdf_container -->
-  <div>
+  <div class="preview_pdf">
+    <h1 style="text-align: center">PDF在线预览</h1>
+    <!-- <div style="text-align: center">
+      <button id="prev" @click="prevPage">上一页</button>
+      <button id="next" @click="nextPage">下一页</button>
+      <span>
+        当前页:
+        <span id="page_num">{{ pageNum }}</span>
+         / 
+        <span id="page_count">{{ numPages }}</span></span
+      >
+    </div> -->
     <pdf
       :src="downUrl"
       :page="pageNum"
       @num-pages="setNumPages"
       @page-loaded="onPageLoaded"
     ></pdf>
-    <p>当前页: {{ pageNum }} / {{ numPages }}</p>
-    <button @click="prevPage">上一页</button>
-    <button @click="nextPage">下一页</button>
+
+    <div>
+      <p style="text-align: center">当前页: {{ pageNum }} / {{ numPages }}</p>
+      <button @click="prevPage">上一页</button>
+      <button @click="nextPage">下一页</button>
+    </div>
   </div>
 </template>
 
@@ -35,17 +51,6 @@ export default {
   },
 
   methods: {
-    handleWheel(event) {
-      console.log("gadsfqwerqweqr===0=");
-      const deltaY = event.deltaY;
-      console.log("gadsfqwerqweqr===1=" + deltaY);
-      if (deltaY > 0) {
-        this.prevPage();
-      } else {
-        this.nextPage();
-      }
-    },
-
     prevPage() {
       var page = this.pageNum;
       if (page > 1) {
@@ -55,7 +60,7 @@ export default {
 
     nextPage() {
       var page = this.pageNum;
-      if (page < this.numPages - 1) {
+      if (page < this.numPages) {
         this.pageNum++;
       }
     },
@@ -78,45 +83,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.pdf_container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  margin: 0 auto;
-}
-
-.button_container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  margin: 0 auto;
-}
-
-.styled_button {
-  justify-content: center;
-  background-color: #4caf50; /* Green */
-  border: none;
-  color: white;
-  padding-left: 80;
-  padding-right: 40;
-  padding-top: 40;
-  padding-bottom: 40;
-  text-align: center;
-  align-items: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 10px 0;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: background-color 0.3s;
-}
-
-.styled_button:hover {
-  background-color: #45a049;
+.preview_pdf {
+  h1 {
+    margin: 30px auto;
+    text-align: center;
+    font-family: "宋体";
+    letter-spacing: 2px;
+  }
 }
 </style>