From 00c39bac238dcd23346f2f47462f3ac6e81f64a3 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 15 五月 2024 16:51:00 +0800 Subject: [PATCH] 1 --- src/books/childHealth/view/content/index.vue | 64 +++++++++++++++++++++++++++---- 1 files changed, 55 insertions(+), 9 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 2cd253b..729678f 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() { @@ -51,7 +52,10 @@ watch: { showCatalogList: { handler(newVal) { - if (this.$store.state.qiankun && this.$store.state.qiankun.catalogChange) { + if ( + this.$store.state.qiankun && + this.$store.state.qiankun.catalogChange + ) { // 璋冪敤鐖跺眰鏂规硶 this.$store.state.qiankun.catalogChange({ showCatalogList: newVal @@ -69,13 +73,16 @@ 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); } }); } @@ -83,12 +90,20 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { // this.gotoPage(5, 100); + // setTimeout(() => { + // this.renderSign("Note", { + // page: 100, + // txt: "鍓嶅効绔ョ敓闀垮彂鑲茬殑褰卞搷鏄竴涓笎", + // color: "#F5E12A" + // }); + // }, 1000); // }, 3000); }, methods: { - scrollFun(e) { + scrollFun(event) { // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 if (event.target.scrollTop > this.previousScrollTop) { + // 鍚戜笅 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( @@ -111,6 +126,7 @@ } } } else if (event.target.scrollTop < this.previousScrollTop) { + // 鍚戜笂 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 鍒拌揪闃堝�� @@ -125,6 +141,7 @@ } } // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢� + console.log(this.showCatalogList); // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆 this.previousScrollTop = event.target.scrollTop; @@ -152,19 +169,48 @@ 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 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 style="background: ${data.color};" class="highLight">${data.txt}</span>` + ); + break; + case "Dashing": + // 鍒掔嚎 + pageDom.innerHTML = pageDom.innerHTML.replace( + reg, + `<span style="text-decoration-color:${data.color};" class="underline">${data.txt}</span>` + ); + 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; + } } }, components: { -- Gitblit v1.9.1