民航概论分页（11.1）

zhongshujie

2024-11-01 aa9f790ecb74a1f31474ec7209c5018a4a9b72c7

 src/books/civilAviation/view/index.vue

@@ -0,0 +1,78 @@
<template>
    <div class="civilAviation-book" @mouseup="handleMouseUp">
      <pageContent></pageContent>
    </div>
  </template>
  
  <script>
  import pageContent from "./components/index.vue"
  export default {
    name: "civilAviation-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">
  @import "../assets/main.less";
  </style>