优化

unknown

2024-06-17 304689614daa96595aeeeed8e46e5dfa992ef2df

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

@@ -8,7 +8,7 @@
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top',
        transformOrigin: 'center top'
      }"
    >
      <pageHeader
@@ -21,61 +21,61 @@
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterFour>
      <chapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterSix>
      <chapterSeven
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterSeven>
      <chapterEight
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterEight>
      <chapterNine
        v-if="showCatalogList.indexOf(10) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterNine>
      <chapterTen
        v-if="showCatalogList.indexOf(11) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
        @closeVideo="closeVideo"
      ></chapterTen>
      <chapterEleven
        v-if="showCatalogList.indexOf(12) > -1"
@@ -132,7 +132,7 @@
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      highlightData: null
    };
  },
  computed: {
@@ -141,7 +141,7 @@
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
    }
  },
  watch: {
    showCatalogList: {
@@ -152,7 +152,7 @@
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal,
            showCatalogList: newVal
          });
        }
        // 启动页码观察
@@ -160,7 +160,7 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      },
      }
    },
    loadPageList: {
      handler(newVal, oldVal) {
@@ -168,7 +168,7 @@
          this.initSwiper();
          this.initViewer();
        }, 200);
      },
      }
    },
    pageZoom: {
      handler(newVal, oldVal) {
@@ -176,8 +176,8 @@
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
      }
    }
  },
  mounted() {
    // 默认加载章节
@@ -212,7 +212,7 @@
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
        }
      });
    }

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

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

    // 启动页码观察
@@ -238,7 +238,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(1, 10);
    // this.gotoPage(1,10);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -252,7 +252,7 @@
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    //   }, 5000);
      // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -266,7 +266,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 5000);
    // }, 500);
  },
  methods: {
    // setZoom1() {
@@ -338,7 +338,7 @@
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
            this.catalogLength
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -388,7 +388,10 @@
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
        const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
@@ -587,14 +590,14 @@
          const catalog = catalogDom.getAttribute("num");
          let text = null;
          if (target.querySelector("p")) {
            text = target.querySelector("p").textContent.substring(0, 20);
            text = target.querySelector("p").textContent.substring(0, 50);
          }
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
              text,
              text
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
@@ -613,6 +616,8 @@
              target,
              "chapter"
            );
            // 添加页码
            this.loadPageList.push(Number(page));
            const catalog = catalogDom.getAttribute("num");
            if (!this.questionDataMap[page]) {
              if (testData && testData[catalog]) {
@@ -634,12 +639,9 @@
                    }
                    this.questionDataMap[page] = obj;
                  }
                  console.log("题目", this.questionDataMap);
                }
              }
            }
            // 添加页码
            this.loadPageList.push(Number(page));
            // 渲染这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
@@ -653,7 +655,10 @@
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
                const pageTextList = document.createTreeWalker(
                  target,
                  NodeFilter.SHOW_TEXT
                );
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
@@ -697,23 +702,23 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -736,12 +741,12 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -760,8 +765,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
            }
          }
        });
      }
    },
@@ -777,7 +782,7 @@
            : "body",
          navbar: true, // 显示导航栏
          toolbar: true, // 显示工具栏
          title: true, // 显示标题
          title: true // 显示标题
        });
      }
    },
@@ -800,7 +805,7 @@
        chapterTen,
        chapterEleven,
        chapterTwelve,
        chapterThirteen,
        chapterThirteen
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -812,7 +817,8 @@
          propsData: {
            showPageList: [],
            questionData: {},
          },
            isSearch: true
          }
        });
        pageExample.$mount(
          (this.container ? this.container : document).querySelector(
@@ -843,7 +849,8 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
              },
                isSearch: true
              }
            });
            pageExample.$mount(
              (this.container ? this.container : document).querySelector(
@@ -856,7 +863,10 @@
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
@@ -873,7 +883,7 @@
                    page: pageNum,
                    catalog: catalogIndex,
                    txt: textDom.textContent,
                    txtIndex: txtIndex,
                    txtIndex: txtIndex
                  });
                }
              }
@@ -897,6 +907,20 @@
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
    closeVideo(path) {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      allVideo = Array.from(allVideo);
      if(allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if(item.currentSrc != path) {
            item.pause()
          }
        }
      }
    }
  },
  components: {
    pageHeader,
@@ -912,8 +936,8 @@
    chapterTen,
    chapterEleven,
    chapterTwelve,
    chapterThirteen,
  },
    chapterThirteen
  }
};
</script>