From b60b839302d34048c216e9fd85b3a84caea257ea Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期二, 11 六月 2024 10:36:17 +0800 Subject: [PATCH] 1 --- src/books/childHealth/view/content/index.vue | 144 +++++++++++++++++++++--------------------------- 1 files changed, 63 insertions(+), 81 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index a06b1ef..1b0f7fa 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -8,7 +8,7 @@ :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, - transformOrigin: 'center top' + transformOrigin: 'center top', }" > <pageHeader @@ -21,61 +21,51 @@ v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterFour> <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterFive> <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterSix> <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterSeven> <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterEight> <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterNine> <chapterTen v-if="showCatalogList.indexOf(11) > -1" :showPageList="loadPageList" :questionData="questionDataMap" - :isSearch="isSearch" ></chapterTen> <chapterEleven v-if="showCatalogList.indexOf(12) > -1" @@ -133,7 +123,6 @@ questionDataMap: {}, renderSignMap: {}, highlightData: null, - isSearch:false }; }, computed: { @@ -142,7 +131,7 @@ }, pageZoom() { return this.$store.state.qiankun.scale / 100; - } + }, }, watch: { showCatalogList: { @@ -153,7 +142,7 @@ ) { // 璋冪敤鐖跺眰鏂规硶 this.$store.state.qiankun.catalogChange({ - showCatalogList: newVal + showCatalogList: newVal, }); } // 鍚姩椤电爜瑙傚療 @@ -161,7 +150,7 @@ this.initObservation(); this.initThemeColor(); }, 500); - } + }, }, loadPageList: { handler(newVal, oldVal) { @@ -169,7 +158,7 @@ this.initSwiper(); this.initViewer(); }, 200); - } + }, }, pageZoom: { handler(newVal, oldVal) { @@ -177,8 +166,8 @@ this.container ? this.container : document ).querySelector(".page-main"); scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; - } - } + }, + }, }, mounted() { // 榛樿鍔犺浇绔犺妭 @@ -213,7 +202,7 @@ // 璺宠浆妫�绱㈢粨鏋滀綅缃� jumpSearchItem: (data) => { this.searchItemLocation(data); - } + }, }); } @@ -222,13 +211,13 @@ this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� - threshold: 0.5 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� - threshold: 0 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); // 鍚姩椤电爜瑙傚療 @@ -239,34 +228,34 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { - // this.gotoPage(1, 10); - // setTimeout(() => { - // this.renderSign("Highlight", { - // id: "2ACA9359", - // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", - // page: "10", - // type: "Highlight", - // color: "#F5E12A" - // }); - // setTimeout(() => { - // this.delSign({ - // ids: ["2ACA9359"] - // }); - // }, 2000); - // }, 5000); + // this.gotoPage(1, 10); + // setTimeout(() => { + // this.renderSign("Highlight", { + // id: "2ACA9359", + // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", + // page: "10", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 5000); - // const pageDom = (this.container ? this.container : document) - // .querySelector("#app") - // .querySelectorAll(".page-box"); - // 妫�绱� - // console.log(this.searchTextByPage("鍎跨"), "searchTextByPage"); - // 妫�绱㈣烦杞� - // this.searchItemLocation({ - // catalog: 2, - // page: 10, - // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ", - // txtIndex: 57 - // }); + // const pageDom = (this.container ? this.container : document) + // .querySelector("#app") + // .querySelectorAll(".page-box"); + // 妫�绱� + // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage"); + // 妫�绱㈣烦杞� + // this.searchItemLocation({ + // catalog: 2, + // page: 10, + // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ", + // txtIndex: 57 + // }); // }, 5000); }, methods: { @@ -339,7 +328,7 @@ this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, - this.catalogLength + this.catalogLength, ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; @@ -389,10 +378,7 @@ this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁� - const treeWalker = document.createTreeWalker( - pageDom, - NodeFilter.SHOW_TEXT - ); + const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT); const allTextNodes = []; let currentNode = treeWalker.nextNode(); while (currentNode) { @@ -591,14 +577,14 @@ const catalog = catalogDom.getAttribute("num"); let text = null; if (target.querySelector("p")) { - text = target.querySelector("p").textContent.substring(0, 20); + text = target.querySelector("p").textContent.substring(0, 50); } // 杩斿洖椤电爜鍜岀珷鑺備俊鎭� if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, - text + text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� @@ -617,6 +603,8 @@ target, "chapter" ); + // 娣诲姞椤电爜 + this.loadPageList.push(Number(page)); const catalog = catalogDom.getAttribute("num"); if (!this.questionDataMap[page]) { if (testData && testData[catalog]) { @@ -641,8 +629,6 @@ } } } - // 娣诲姞椤电爜 - this.loadPageList.push(Number(page)); // 娓叉煋杩欎竴椤电殑鏍囪 for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { @@ -656,10 +642,7 @@ // 楂樹寒琛� setTimeout(() => { // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣 - const pageTextList = document.createTreeWalker( - target, - NodeFilter.SHOW_TEXT - ); + const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT); // 鍖归厤鍏抽敭瀛� const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); @@ -703,7 +686,7 @@ autoplay: { //鑷姩寮�濮� delay: 3000, //鏃堕棿闂撮殧 - disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* + disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* }, paginationClickable: true, slidesPerView: 1, // 涓�缁勪笁涓� @@ -715,11 +698,11 @@ ), prevEl: (this.container ? this.container : document).querySelector( ".swiper-button-prev" - ) + ), }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� observer: true, - observeParents: true + observeParents: true, // // 濡傛灉闇�瑕佸垎椤靛櫒 // pagination: { // el: (this.container ? this.container : document).querySelector( @@ -747,7 +730,7 @@ ), prevEl: (this.container ? this.container : document).querySelector( ".swiper-button-prev" - ) + ), }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� observer: true, @@ -766,8 +749,8 @@ var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; - } - } + }, + }, }); } }, @@ -783,7 +766,7 @@ : "body", navbar: true, // 鏄剧ず瀵艰埅鏍� toolbar: true, // 鏄剧ず宸ュ叿鏍� - title: true // 鏄剧ず鏍囬 + title: true, // 鏄剧ず鏍囬 }); } }, @@ -806,7 +789,7 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen + chapterThirteen, }; // 閬嶅巻鎵�鏈夌珷鑺傛枃浠� for (const key in pageData) { @@ -817,8 +800,9 @@ pageExample = new pageComponent({ propsData: { showPageList: [], - questionData: {} - } + questionData: {}, + isSearch: true + }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( @@ -848,8 +832,9 @@ pageExample = new pageComponent({ propsData: { showPageList: [pageNum], - questionData: {} - } + questionData: {}, + isSearch: true + }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( @@ -862,10 +847,7 @@ .querySelector(`[page="${pageNum}"]`); if (thisPageDom) { // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣 - const pageTextList = document.createTreeWalker( - thisPageDom, - NodeFilter.SHOW_TEXT - ); + const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT); // 鍖归厤鍏抽敭瀛� const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); @@ -882,7 +864,7 @@ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, - txtIndex: txtIndex + txtIndex: txtIndex, }); } } @@ -905,7 +887,7 @@ this.highlightData = data; // 璺宠浆 this.gotoPage(data.catalog, data.page, () => {}); - } + }, }, components: { pageHeader, @@ -921,8 +903,8 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen - } + chapterThirteen, + }, }; </script> -- Gitblit v1.9.1