1

YM

2024-05-15 00c39bac238dcd23346f2f47462f3ac6e81f64a3

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

@@ -36,6 +36,7 @@
import chapterEleven from "./components/chapter011.vue";
import chapterTwelve from "./components/chapter012.vue";
import chapterThirteen from "./components/chapter013.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
export default {
  data() {
@@ -51,8 +52,10 @@
  watch: {
    showCatalogList: {
      handler(newVal) {
        console.log("显示章节", newVal);
        if (this.$store.state.qiankun && this.$store.state.qiankun.catalogChange) {
        if (
          this.$store.state.qiankun &&
          this.$store.state.qiankun.catalogChange
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal
@@ -70,27 +73,37 @@
      this.throttleThreshold,
      { leading: true, trailing: false }
    );
    // 提供页面跳转功能
    // 定义子层方法
    if (this.setGlobalState) {
      console.log("setGlobalState");
      // 定义子层方法
      // 提供页面跳转功能
      this.setGlobalState({
        gotoPage: (catalog, page) => {
          console.log(catalog, page, "gotoPage：catalog, page");
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮
        renderSign: (type, data) => {
          this.renderSign(type, data);
        }
      });
    }

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(5, 100);
    }, 3000);
    // setTimeout(() => {
    //   this.gotoPage(5, 100);
    //   setTimeout(() => {
    //     this.renderSign("Note", {
    //       page: 100,
    //       txt: "前儿童生长发育的影响是一个渐",
    //       color: "#F5E12A"
    //     });
    //   }, 1000);
    // }, 3000);
  },
  methods: {
    scrollFun(e) {
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
        if (
@@ -113,6 +126,7 @@
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
          // 到达阈值
@@ -156,16 +170,47 @@
        }
        setTimeout(() => {
          // 跳转页码
          const pageDom = document.querySelector(`[page="${page}"]`);
          const pageDom = (
            this.container ? this.container : document
          ).querySelector(`[page="${page}"]`);
          if (pageDom) {
            pageDom.scrollIntoView();
          } else {
            console.log("页码错误！");
          }
        }, 50);
        }, 500);
      } else {
        console.log("章节错误！");
      }
    },
    renderSign(type, data) {
      const pageDom = (
        this.container ? this.container : document
      ).querySelector(`[page="${data.page}"]`);
      let reg = new RegExp(`${data.txt}`, "ig");
      switch (type) {
        case "Highlight":
          // 高亮
          pageDom.innerHTML = pageDom.innerHTML.replace(
            reg,
            `<span style="background: ${data.color};" class="highLight">${data.txt}</span>`
          );
          break;
        case "Dashing":
          // 划线
          pageDom.innerHTML = pageDom.innerHTML.replace(
            reg,
            `<span style="text-decoration-color:${data.color};" class="underline">${data.txt}</span>`
          );
          break;
        case "Note":
          // 笔记
          pageDom.innerHTML = pageDom.innerHTML.replace(
            reg,
            `<span style="border-bottom-color:${data.color}" class="notesline">${data.txt}</span><img src="${NoteIcon}" style="cursor: pointer" />`
          );
          break;
      }
    }
  },
  components: {