From 9b9677838792e6cf8992ab042fce8c1c071af7a5 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 31 五月 2024 15:55:04 +0800
Subject: [PATCH] 高亮跳转
---
src/books/childHealth/view/content/index.vue | 92 +++++++++++++++++++++++----------------------
1 files changed, 47 insertions(+), 45 deletions(-)
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 4855ee8..c57d131 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -119,7 +119,8 @@
loadPageObserver: null,
loadPageList: [],
questionDataMap: {},
- renderSignMap: {}
+ renderSignMap: {},
+ highlightData: null
};
},
computed: {
@@ -208,7 +209,7 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- setTimeout(() => {
+ // setTimeout(() => {
// this.gotoPage(1, 10);
// setTimeout(() => {
// this.renderSign("Highlight", {
@@ -231,13 +232,13 @@
// 妫�绱�
// console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage");
// 妫�绱㈣烦杞�
- this.searchItemLocation({
- catalog: 2,
- page: 10,
- txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
- txtIndex: 57
- });
- }, 5000);
+ // this.searchItemLocation({
+ // catalog: 2,
+ // page: 10,
+ // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
+ // txtIndex: 57
+ // });
+ // }, 5000);
},
methods: {
// 婊氬姩鐩戝惉
@@ -286,7 +287,7 @@
this.previousScrollTop = event.target.scrollTop;
},
// 绔犺妭銆侀〉闈㈣烦杞�
- gotoPage(catalog, page, callback) {
+ gotoPage(catalog, page) {
if (catalog >= 0 && catalog <= this.catalogLength) {
// 澶勭悊娓叉煋绔犺妭
if (catalog == 0) {
@@ -307,7 +308,6 @@
).querySelector(`[page="${page}"]`);
if (pageDom) {
pageDom.scrollIntoView();
- if (callback) callback();
} else {
console.log("椤电爜閿欒锛�");
}
@@ -604,6 +604,36 @@
});
}
}
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = (
+ this.container ? this.container : document
+ ).createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ // 鍖归厤鍏抽敭瀛�
+ const allPageTextNodes = [];
+ let currentNode = pageTextList.nextNode();
+ while (currentNode) {
+ allPageTextNodes.push(currentNode);
+ currentNode = pageTextList.nextNode();
+ }
+ for (let i = 0; i < allPageTextNodes.length; i++) {
+ const textDom = allPageTextNodes[i];
+ let txtIndex = textDom.textContent.indexOf(this.highlightData.txt);
+ if (txtIndex > -1) {
+ textDom.parentNode.style.transition =
+ "background-color 0.8s";
+ textDom.parentNode.scrollIntoView();
+ textDom.parentNode.style.backgroundColor = "#79bbf0";
+ setTimeout(() => {
+ textDom.parentNode.style.backgroundColor = "";
+ }, 1000);
+ }
+ }
+ }, 100);
+ }
if (this.loadPageList.length > 5) {
// 瓒呰繃5椤�
this.loadPageList.shift();
@@ -623,7 +653,7 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
@@ -635,11 +665,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(
@@ -779,38 +809,10 @@
},
// 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
searchItemLocation(data) {
+ // 璁板綍楂樹寒淇℃伅
+ this.highlightData = data;
// 璺宠浆
- this.gotoPage(data.catalog, data.page, () => {
- // 楂樹寒琛�
- const thisPageDom = (
- this.container ? this.container : document
- ).querySelector(`[page="${data.page}"]`);
- if (thisPageDom) {
- // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = (
- this.container ? this.container : document
- ).createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
- // 鍖归厤鍏抽敭瀛�
- const allPageTextNodes = [];
- let currentNode = pageTextList.nextNode();
- while (currentNode) {
- allPageTextNodes.push(currentNode);
- currentNode = pageTextList.nextNode();
- }
- for (let i = 0; i < allPageTextNodes.length; i++) {
- const textDom = allPageTextNodes[i];
- let txtIndex = textDom.textContent.indexOf(data.txt);
- if (txtIndex > -1) {
- textDom.parentNode.style.transition = "background-color 0.8s";
- textDom.parentNode.scrollIntoView();
- textDom.parentNode.backgroundColor = "#79bbf0";
- setTimeout(() => {
- textDom.parentNode.backgroundColor = "";
- }, 2000);
- }
- }
- }
- });
+ this.gotoPage(data.catalog, data.page, () => {});
}
},
components: {
--
Gitblit v1.9.1