分页

闫增涛

2024-05-14 653b57560296fc07e9b5893e884402c40b80fac9

 src/books/childHealth/view/index.vue

@@ -10,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,
@@ -22,11 +23,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 = {
@@ -367,7 +384,6 @@
        });
      }
    },

    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
@@ -378,22 +394,77 @@
    },
    handleMouseUp(e) {
      const txt = window.getSelection()?.toString();
      const node = window.getSelection();
      let html = node.anchorNode.parentNode.parentNode.parentNode;
      let nextHtml = html.firstChild.innerHTML;
      let pageHtml = this.getParentWithClass(node.anchorNode,'page-box')
      if (txt) {
        console.log(pageHtml);
      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,
            });
          }
        }
      }
      if (html) {
        const page = html.getAttribute("page");
        console.log("page", page,this.$actions);
        this.$actions.setGlobalState({
          aa:page
        })
        
    },
    
    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>