ohplay_h5/src/pages/explain/index_pdf.vue

<template>
  <!-- pdf_container -->
  <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>
</template>

<script>
import pdf from "vue-pdf";

export default {
  components: {
    pdf,
  },

  data() {
    return {
      downUrl: "",
      pageNum: 1,
      numPages: 0,
    };
  },

  onLoad(e) {
    var that = this;
    that.downUrl = e.downUrl;
  },

  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) {
        this.pageNum--;
      }
    },

    nextPage() {
      var page = this.pageNum;
      if (page < this.numPages - 1) {
        this.pageNum++;
      }
    },

    setNumPages(numPagesData) {
      this.numPages = numPagesData;
    },

    onPageLoaded(page) {
      // this.pageNum = page;
      // // 这里可以添加你的页数控制逻辑
      // // 例如: 当PDF有超过100页时停止加载更多页面
      // if (this.numPages > 100) {
      //   // 使用vue-pdf的stop方法停止加载
      //   this.$refs.pdfComponent.stop();
      // }
    },
  },
};
</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;
}
</style>