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 | 129 +++++++++++++++++++++++++++++++++++++++--- 1 files changed, 119 insertions(+), 10 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 5f88fe5..6e37da0 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -3,7 +3,6 @@ <div class="page-content"> <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader> <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne> - <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo> <chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree> <chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour> @@ -37,9 +36,8 @@ 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() { return { @@ -51,6 +49,21 @@ throttledScrollHandler: null }; }, + watch: { + showCatalogList: { + handler(newVal, oldVal) { + if ( + this.$store.state.qiankun && + this.$store.state.qiankun.catalogChange + ) { + // 璋冪敤鐖跺眰鏂规硶 + this.$store.state.qiankun.catalogChange({ + showCatalogList: newVal + }); + } + } + } + }, mounted() { // 榛樿鍔犺浇绔犺妭 this.showCatalogList = [0]; @@ -60,24 +73,48 @@ this.throttleThreshold, { leading: true, trailing: false } ); - // 鎻愪緵椤甸潰璺宠浆鍔熻兘 + // 瀹氫箟瀛愬眰鏂规硶 if (this.setGlobalState) { + // 鎻愪緵椤甸潰璺宠浆鍔熻兘 this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page); + }, + // 娓叉煋绗旇銆侀珮浜�佸垝绾� + renderSign: (type, data) => { + this.renderSign(type, data); + }, + // 鍒犻櫎绗旇銆侀珮浜�佸垝绾� + delSign: (data) => { + this.delSign(data); } }); } + // 娴嬭瘯椤甸潰璺宠浆 // 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) { - console.log("鍚戜笅婊氬姩"); + // 鍚戜笅 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( @@ -100,7 +137,7 @@ } } } else if (event.target.scrollTop < this.previousScrollTop) { - console.log("鍚戜笂婊氬姩"); + // 鍚戜笂 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 鍒拌揪闃堝�� @@ -114,9 +151,18 @@ } } } - console.log(this.showCatalogList); + // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢� // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆 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: "" + // }); }, gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { @@ -134,16 +180,79 @@ } setTimeout(() => { // 璺宠浆椤电爜 - const pageDom = document.querySelector(`[page="${page}"]`); + const pageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); } else { console.log("椤电爜閿欒锛�"); } - }, 50); + }, 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