分页

闫增涛

2024-05-14 cb54fc44f2277c491eea25c7831457ca118ecd3c

 src/books/childHealth/view/index.vue

@@ -1,8 +1,7 @@
<template>
  <div class="temp-book">
  <div class="temp-book" @mouseup="handleMouseUp">
    <pageHeader></pageHeader>
    <pageContent></pageContent>
    <!-- <examinations :questionList="cardList" :type="type"></examinations> -->
  </div>
</template>

@@ -11,8 +10,9 @@
import { getPublicImage } from "@/assets/js/middleGround/tool";
import pageHeader from "./header/index.vue";
import pageContent from "./content/index.vue";
import {mapState} from 'vuex'
export default {
  name: "temp-book",
  name: "child-health",
  components: {
    pageHeader,
    pageContent,
@@ -27,7 +27,20 @@
  },
  mounted() {
    this.getBookInfo();
    console.log(this.$store.state.qiankun, "this.$store.state.qiankun");
  },
  // computed: {
  //   ...mapState(['lineHeightList'])
  // },
  // wathch: {
  //   lineHeightList:{
  //     handler(){
  //       console.log('监听到lineHeightList变化');
  //       this.handleDom()
  //     },
  //     deep:true
  //   }
  // },
  methods: {
    getBookInfo() {
      let query = {
@@ -368,6 +381,80 @@
        });
      }
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    handleMouseUp(e) {
      const txt = window.getSelection()?.toString();
      const selection = window.getSelection();
      if (selection.type != "none") {
        let node = selection.anchorNode.parentNode;
        let pageHtml = this.getParentWithClass(
          selection.anchorNode,
          "page-box"
        );
        console.log("子项", selection.anchorNode);
        let chapterDom = this.getParentWithClass(
          selection.anchorNode,
          "chapter"
        );
        let chapterNum;
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        console.log("第一处判断", txt, pageHtml);
        if (txt && pageHtml) {
          const page = pageHtml.getAttribute("page");
          console.log(
            {
              chapterNum,
              txt,
              selection,
              node,
              page,
              x: e.x,
              y: e.y,
            },
            "sendData"
          );
          // 监听选中文本事件，并触发父层方法
          console.log("第二处判断", this.$store.state.qiankun);
          if (this.$store.state.qiankun.windowSelection) {
            this.$store.state.qiankun.windowSelection({
              txt,
              selection,
              node,
              page,
              x: e.x,
              y: e.y,
            });
          }
        }
      }
    },
    handleDom() {
      const selection = window.getSelection();
      let textDom = this.getParentWithClass(selection.anchorNode, "page-box");
      for (let i = 0; i < this.$store.state.lineHeightList.length; i++) {
        let item = this.$store.state.lineHeightList[i];
        let rReg = new RegExp(`${item.selectText}`, "ig");
        let text = textDom.innerHTML;
        console.log(item.selectNode, "item.selectNode.innerHTML");
        let nodeHtml = item.selectNode;
        let nHtml = "";
        nHtml = nodeHtml.replace(
          rReg,
          `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>`
        );
        console.log(nHtml);
        let rHtml = "";
        rHtml = text.replace(nodeHtml, nHtml);
        textDom.innerHTML = rHtml;
      }
    },
  },
};
</script>