英语

闫增涛

2024-05-22 0df037ea5a1ee04e35eb339ff1fcddf658e4901f

 src/books/English/view/index.vue

@@ -1,15 +1,82 @@
<template>
  <div class="english-book">

  <div
    class="english-book"
    @mouseup="handleMouseUp"
    :style="{
      fontSize: fontSize ? fontSize + 'px' : '16px',
      transform: `scale(${pageZoom ? pageZoom : 1})`,
    }"
  >
    <pageContent></pageContent>
  </div>
</template>

<script>
import pageContent from "./components/index.vue";
  export default {
    name:'english-book'
  name: "english-book",
  components: { pageContent },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  methods: {
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
  }
      }
    },
    handleMouseUp(e) {
      const selection = (
        this.container ? this.container : window
      ).getSelection();
      const txt = selection.toString();
      if (selection.type != "none" && txt) {
        let node = selection.anchorNode.parentNode;
        let pageHtml = this.getParentWithClass(
          selection.anchorNode,
          "page-box"
        );
        let chapterDom = this.getParentWithClass(
          selection.anchorNode,
          "chapter"
        );
        let chapterNum;
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        if (pageHtml) {
          const page = pageHtml.getAttribute("page");
          // 监听选中文本事件，并触发父层方法
          if (this.$store.state.qiankun.windowSelection) {
            this.$store.state.qiankun.windowSelection({
              chapterNum,
              txt,
              page,
              x: e.x,
              y: e.y,
            });
          }
        }
      } else {
        if (this.$store.state.qiankun.windowSelection) {
          this.$store.state.qiankun.windowSelection({
            chapterNum: "",
            txt: "",
            page: "",
            x: e.x,
            y: e.y,
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>

</style>
<style lang="less" scoped></style>