增加页面跳转

YM

2024-05-14 96fc14f8a8a2ddebeda887f30c902a51bb97b61a

 src/books/childHealth/view/index.vue

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

<script>
import examinations from "./components/examinations/index.vue";
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,
    examinations,
  },
@@ -23,11 +20,27 @@
      type: "option",
      idPathList: [],
      cardList: [],
      isMouseDown:false,
      showToolBox:false,
      move:false
    };
  },
  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,87 @@
        });
      }
    },
    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,
            });
          }
        }
      }
    },
    
    handleMouseDown() {
      this.$data.isMouseDown = true;
      this.$data.showToolBox = false;
    },
    handleMousemove() {
      if (this.$data.isMouseDown) {
        this.$data.move= true;
      }
    },

    handleMouseUp(e) {
      if (move.value) {
        const txt = window.getSelection()?.toString();
        selectText.value = txt;
        const node = window.getSelection();
        let html = node.anchorNode.parentNode.parentNode;
        dialogToolData.chapter = html.firstChild.innerHTML;
        if (txt) {
          showToolBox.value = true;
          dialogToolData.top = e.y;
          dialogToolData.left = e.x;
        }
        isMouseDown.value = false;
      }
      move.value = false;
    },
  },
};
</script>