修复放大缩小

YM

2024-05-28 de8dbab2dae4853f781ae91e6ca864fdf9b361e7

 src/books/childHealth/view/content/index.vue

@@ -1,19 +1,76 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content">
      <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(5) > -1"></chapterFive>
      <chapterSix v-if="showCatalogList.indexOf(6) > -1"></chapterSix>
      <chapterSeven v-if="showCatalogList.indexOf(7) > -1"></chapterSeven>
      <chapterEight v-if="showCatalogList.indexOf(8) > -1"></chapterEight>
      <chapterNine v-if="showCatalogList.indexOf(9) > -1"></chapterNine>
      <chapterTen v-if="showCatalogList.indexOf(10) > -1"></chapterTen>
      <chapterEleven v-if="showCatalogList.indexOf(11) > -1"></chapterEleven>
      <chapterTwelve v-if="showCatalogList.indexOf(12) > -1"></chapterTwelve>
    <div
      class="page-content"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top'
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(0) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterFour>
      <chapterFive
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterSix>
      <chapterSeven
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterSeven>
      <chapterEight
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterEight>
      <chapterNine
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterNine>
      <chapterTen
        v-if="showCatalogList.indexOf(10) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterTen>
      <chapterEleven
        v-if="showCatalogList.indexOf(11) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterEleven>
      <chapterTwelve
        v-if="showCatalogList.indexOf(12) > -1"
        :showPageList="loadPageList"
      ></chapterTwelve>
      <chapterThirteen
        v-if="showCatalogList.indexOf(13) > -1"
      ></chapterThirteen>
@@ -38,6 +95,8 @@
import chapterThirteen from "./components/chapter013.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/examinationList";
export default {
  data() {
    return {
@@ -47,7 +106,23 @@
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionData: {}
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    }
  },
  provide() {
    return {
      changeQuestionData: this.changeQuestionData
    };
  },
  watch: {
@@ -103,6 +178,12 @@
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5 // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0 // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
@@ -237,7 +318,7 @@
            // 笔记
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>`
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut">${data.txt}<img src="${NoteIcon}"/></span>`
            );
            break;
        }
@@ -275,11 +356,26 @@
        this.container ? this.container : document
      ).querySelectorAll(".page-box");
      sections.forEach((section) => {
        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
          const page = section.getAttribute("page");
          if (Number(page) > this.config.activeBook.tryPageCount) {
            let chapterDom = this.getParentWithClass(section, "chapter");
            const chapterNum = chapterDom.getAttribute("num");
            this.catalogLength = Number(chapterNum) - 1;
            section.remove();
            return false;
          }
        }
        //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        const isLoadObserver = section.getAttribute("loadObserver");
        if (!isObserver) {
          this.observer.observe(section);
          section.setAttribute("observer", "1");
        }
        if (!isLoadObserver) {
          this.loadPageObserver.observe(section);
          section.setAttribute("loadObserver", "1");
        }
      });
    },
@@ -383,7 +479,7 @@
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log("page", page, catalog);
          console.log(page, "page", catalog, "catalog");
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
@@ -396,6 +492,53 @@
          //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。
        }
      });
    },
    loadPageCallback(entries, observer) {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(page) == -1) {
            //
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
            );
            const catalog = catalogDom.getAttribute("num");
            if (!this.questionData[page]) {
              if (testData && testData[catalog]) {
                if (testData[catalog][page]) {
                  if (Array.isArray(testData[catalog][page])) {
                    this.questionData[page] = await getQuestionList(
                      [],
                      testData[catalog][page],
                      this.config.activeBook
                    );
                  } else {
                    const obj = {};
                    for (let key in testData[catalog][page]) {
                      obj[key] = await getQuestionList(
                        [],
                        testData[catalog][page][key],
                        this.config.activeBook
                      );
                    }
                    this.questionData[page] = obj;
                  }
                }
              }
            }
            this.loadPageList.push(Number(page));
            if (this.loadPageList.length > 5) {
              // 超过5页
              this.loadPageList.shift();
            }
          }
        }
      });
    },
    changeQuestionData(page, data) {
      this.$props.questionData[page] = data;
    }
  },
  components: {