YM
2024-05-14 96fc14f8a8a2ddebeda887f30c902a51bb97b61a
src/books/childHealth/view/index.vue
@@ -1,6 +1,5 @@
<template>
  <div class="temp-book" @mouseup="handleMouseUp">
    <pageHeader></pageHeader>
    <pageContent></pageContent>
  </div>
</template>
@@ -8,13 +7,11 @@
<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'
import { mapState } from "vuex";
export default {
  name: "child-health",
  components: {
    pageHeader,
    pageContent,
    examinations,
  },
@@ -23,6 +20,9 @@
      type: "option",
      idPathList: [],
      cardList: [],
      isMouseDown:false,
      showToolBox:false,
      move:false
    };
  },
  mounted() {
@@ -435,26 +435,33 @@
        }
      }
    },
    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;
    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>