增加标记删除功能

YM

2024-05-15 ab9dbd14d295f9ad09beb4d6cb75b7f6e3c7ecb9

增加标记删除功能

 src/books/childHealth/view/content/index.vue

@@ -80,10 +80,14 @@
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          this.renderSign(type, data);
        }
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
      });
    }

@@ -184,32 +188,64 @@
      }
    },
    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;
        }
      }
    },
    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;
        }
      }
    }
  },