民航概论分页（项目二结束）

zhongshujie

2024-10-31 9076aac9d92eafd4b44fce4a9a53c8bd16e7e7d2

 src/books/civilAviation/view/components/index.vue

@@ -1,15 +1,16 @@
<template>
  <div class="page-main"  @scroll="throttledScrollHandler">
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div class="page-content" :style="{
      fontSize: fontSize ? fontSize + 'px' : '18px',
      transform: `scale(${pageZoom ? pageZoom : 1})`,
      fontSize: fontSize + 'px',
      transform: `scale(${pageZoom})`,
      transformOrigin: 'center top',
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
    </div>
  </div>
</template>
@@ -17,6 +18,7 @@
<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue"
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -27,7 +29,7 @@
  name: "pageContent",
  data() {
    return {
      catalogLength: 2, // 总章节数
      catalogLength: 3, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -46,10 +48,11 @@
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
      this.transformDom(this.$store.state.qiankun.fontSize)
      return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 18;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
      return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1;
    },
  },
  watch: {
@@ -74,6 +77,7 @@
    loadPageList: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.transformDom(this.$store.state.qiankun.fontSize)
          this.initSwiper();
          this.initViewer();
          this.closeAudio();
@@ -149,8 +153,8 @@
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(6, 30);
    setTimeout(() => {
      this.gotoPage(2, 134);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -164,7 +168,7 @@
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    // }, 500);
    }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -209,7 +213,7 @@
          event.target.scrollHeight - this.loadThreshold
        ) {
          console.log(1);
          

          debugger
          // 到达阈值
          if (
@@ -704,6 +708,7 @@
      const pageData = {
        pageHeader,
        chapterOne,
        chapterTwo
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -909,11 +914,24 @@
          playVudio.requestPictureInPicture();
        }
      }
    },
    //其他类名下字体大小变化
    transformDom(fs) {
      if(!fs) return
      let doms = (
        this.container ? this.container : document
      ).querySelectorAll('.block')
      if(!doms.length) return 
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.style.fontSize = fs + 'px'
      }
    }
  },
  components: {
    pageHeader,
    chapterOne,
    chapterTwo
  },
};
</script>