闫增涛
2024-05-15 24a4a7ea01a61f90cbe6d6aaadc1c7573a37f3d3
Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
1个文件已修改
93 ■■■■ 已修改文件
src/books/childHealth/view/content/index.vue 93 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/childHealth/view/content/index.vue
@@ -80,9 +80,13 @@
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        }
      });
    }
@@ -184,32 +188,73 @@
      }
    },
    renderSign(type, data) {
      const pageDom = (
      const existence = (
        this.container ? this.container : document
      ).querySelector(`[page="${data.page}"]`);
      let reg = new RegExp(`${data.txt}`, "ig");
      switch (type) {
        case "Highlight":
          // 高亮
          pageDom.innerHTML = pageDom.innerHTML.replace(
            reg,
            `<span style="background: ${data.color};" class="highLight">${data.txt}</span>`
      ).querySelector(`[dataid="${data.id}"]`);
      // 去重
      if (!existence) {
        const pageDom = (
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        let reg = new RegExp(`${data.txt}`, "ig");
        switch (type) {
          case "Highlight":
            // 高亮
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight">${data.txt}</span>`
            );
            break;
          case "Dashing":
            // 划线
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline">${data.txt}</span>`
            );
            break;
          case "Note":
            // 笔记
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline">${data.txt}</span><img src="${NoteIcon}" style="cursor: pointer" />`
            );
            break;
        }
        // 绑定事件
        const thisAddDom = (
          this.container ? this.container : document
        ).querySelector(`[dataid="${id}"]`);
        thisAddDom.addEventListener("click", function (e) {
          console.log("点击事件回调的实例,通过这个参数获取类型", e);
          if (this.$store.state.qiankun && this.$store.state.qiankun.signClick)
            this.$store.state.qiankun.signClick(type, data);
        });
      }
    },
    delSign({ ids, type }) {
      if (ids && ids.length) {
        for (let i = 0; i < ids.length; i++) {
          const id = ids[i];
          const dom = (
            this.container ? this.container : document
          ).querySelector(`[dataid="${id}"]`);
          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
            dom.outerHTML,
            dom.outerText
          );
          break;
        case "Dashing":
          // 划线
          pageDom.innerHTML = pageDom.innerHTML.replace(
            reg,
            `<span style="text-decoration-color:${data.color};" class="underline">${data.txt}</span>`
        }
      }
      if (type) {
        const doms = (
          this.container ? this.container : document
        ).querySelectorAll(`[datatype="${type}"]`);
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
            dom.outerHTML,
            dom.outerText
          );
          break;
        case "Note":
          // 笔记
          pageDom.innerHTML = pageDom.innerHTML.replace(
            reg,
            `<span style="border-bottom-color:${data.color}" class="notesline">${data.txt}</span><img src="${NoteIcon}" style="cursor: pointer" />`
          );
          break;
        }
      }
    }
  },