From 2e664020f32a0eda87139bc1363fa34b7b5697ba Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 15 五月 2024 23:11:51 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/childHealth/view/content/index.vue | 122 +++++++++++++++++++++++++++++++++++----- 1 files changed, 105 insertions(+), 17 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 2cd253b..6e37da0 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -36,6 +36,7 @@ import chapterEleven from "./components/chapter011.vue"; import chapterTwelve from "./components/chapter012.vue"; import chapterThirteen from "./components/chapter013.vue"; +import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; export default { data() { @@ -50,8 +51,11 @@ }, watch: { showCatalogList: { - handler(newVal) { - if (this.$store.state.qiankun && this.$store.state.qiankun.catalogChange) { + handler(newVal, oldVal) { + if ( + this.$store.state.qiankun && + this.$store.state.qiankun.catalogChange + ) { // 璋冪敤鐖跺眰鏂规硶 this.$store.state.qiankun.catalogChange({ showCatalogList: newVal @@ -69,13 +73,20 @@ this.throttleThreshold, { leading: true, trailing: false } ); - // 鎻愪緵椤甸潰璺宠浆鍔熻兘 + // 瀹氫箟瀛愬眰鏂规硶 if (this.setGlobalState) { - // 瀹氫箟瀛愬眰鏂规硶 + // 鎻愪緵椤甸潰璺宠浆鍔熻兘 this.setGlobalState({ gotoPage: (catalog, page) => { - console.log(catalog, page, "gotoPage锛歝atalog, page"); this.gotoPage(catalog, page); + }, + // 娓叉煋绗旇銆侀珮浜�佸垝绾� + renderSign: (type, data) => { + this.renderSign(type, data); + }, + // 鍒犻櫎绗旇銆侀珮浜�佸垝绾� + delSign: (data) => { + this.delSign(data); } }); } @@ -83,12 +94,27 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { // this.gotoPage(5, 100); + // setTimeout(() => { + // this.renderSign("Note", { + // id: "2ACA9359", + // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�", + // page: "100", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 1000); // }, 3000); }, methods: { - scrollFun(e) { + scrollFun(event) { // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 if (event.target.scrollTop > this.previousScrollTop) { + // 鍚戜笅 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( @@ -111,6 +137,7 @@ } } } else if (event.target.scrollTop < this.previousScrollTop) { + // 鍚戜笂 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 鍒拌揪闃堝�� @@ -129,13 +156,13 @@ this.previousScrollTop = event.target.scrollTop; // 杩斿洖椤电爜鍜岀珷鑺備俊鎭� - if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) - this.$store.state.qiankun.pageChange({ - page: 100, - catalog: 5, - catalogId: "", - catalogName: "" - }); + // if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) + // this.$store.state.qiankun.pageChange({ + // page: 100, + // catalog: 5, + // catalogId: "", + // catalogName: "" + // }); }, gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { @@ -152,19 +179,80 @@ this.showCatalogList = [catalog - 1, catalog, catalog + 1]; } setTimeout(() => { - console.log(document); - console.log(document.querySelector(`[page="${page}"]`)); // 璺宠浆椤电爜 - const pageDom = document.querySelector(`[page="${page}"]`); + const pageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); } else { console.log("椤电爜閿欒锛�"); } - }, 100); + }, 500); } else { console.log("绔犺妭閿欒锛�"); } + }, + renderSign(type, data) { + const existence = ( + this.container ? this.container : document + ).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" onclick="signClick('Highlight','${data.id}')">${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" onclick="signClick('Dashing','${data.id}')">${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" onclick="signClick('Note','${data.id}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` + ); + 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 + ); + } + } + 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 + ); + } + } } }, components: { -- Gitblit v1.9.1