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 | 90 ++++++++++++++++++++++++++++++++++++-------- 1 files changed, 73 insertions(+), 17 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 6abe606..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() { @@ -45,20 +46,23 @@ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� throttleThreshold: 100, // 鑺傛祦闃堝�� previousScrollTop: 0, - throttledScrollHandler: null, + throttledScrollHandler: null }; }, watch: { showCatalogList: { handler(newVal) { - console.log("鏄剧ず绔犺妭", newVal); - if (this.$store.state.qiankun.windowSelection) { - this.$store.state.qiankun.windowSelection({ - showCatalogList: newVal, + if ( + this.$store.state.qiankun && + this.$store.state.qiankun.catalogChange + ) { + // 璋冪敤鐖跺眰鏂规硶 + this.$store.state.qiankun.catalogChange({ + showCatalogList: newVal }); } - }, - }, + } + } }, mounted() { // 榛樿鍔犺浇绔犺妭 @@ -69,25 +73,37 @@ this.throttleThreshold, { leading: true, trailing: false } ); - // 鎻愪緵椤甸潰璺宠浆鍔熻兘 + // 瀹氫箟瀛愬眰鏂规硶 if (this.setGlobalState) { - console.log("setGlobalState"); + // 鎻愪緵椤甸潰璺宠浆鍔熻兘 this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page); }, + // 娓叉煋绗旇銆侀珮浜� + renderSign: (type, data) => { + this.renderSign(type, data); + } }); } + // 娴嬭瘯椤甸潰璺宠浆 // 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) { - console.log("鍚戜笅婊氬姩"); + // 鍚戜笅 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( @@ -110,7 +126,7 @@ } } } else if (event.target.scrollTop < this.previousScrollTop) { - console.log("鍚戜笂婊氬姩"); + // 鍚戜笂 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 鍒拌揪闃堝�� @@ -128,6 +144,15 @@ console.log(this.showCatalogList); // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆 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) { @@ -138,24 +163,55 @@ this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, - this.catalogLength, + this.catalogLength ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; } 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 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: { pageHeader, @@ -171,8 +227,8 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen, - }, + chapterThirteen + } }; </script> -- Gitblit v1.9.1