From 57ebfaedfe6364ab0c3beb1afe01c00fe2798a2c Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 06 六月 2024 10:28:54 +0800
Subject: [PATCH] 嵌入式优化
---
src/books/embedded/view/components/chapter001.vue | 80 ++++--
src/books/embedded/view/components/index.vue | 302 ++++++++++++++++++++----
src/books/artAndDance/view/components/chapter003.vue | 11
src/books/childHealth/view/content/components/header.vue | 2
src/books/artAndDance/view/components/chapter001.vue | 11
src/books/artAndDance/view/components/chapter005.vue | 4
/dev/null | 51 ----
src/books/artAndDance/view/components/header.vue | 4
src/books/artAndDance/view/components/chapter002.vue | 1
src/books/artAndDance/view/components/chapter004.vue | 11
src/books/artAndDance/view/components/index.vue | 218 ++++++++++++++++-
src/App.vue | 2
src/books/English/view/components/index.vue | 1
13 files changed, 506 insertions(+), 192 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index de22ec3..8f7eebb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,7 +72,7 @@
// embedded
// english
// artAndDance
- this.config.resourceCtx + "artAndDance"
+ this.config.resourceCtx + "english"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 7729adb..884face 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -88,7 +88,6 @@
setTimeout(() => {
this.initSwiper();
this.initViewer();
- // this.getAduio();
}, 200);
},
},
diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue
index 85a7ea2..6ff78bb 100644
--- a/src/books/artAndDance/view/components/chapter001.vue
+++ b/src/books/artAndDance/view/components/chapter001.vue
@@ -80,13 +80,8 @@
x5-playsinline=""
controls
class="w100"
+ style="margin-top: 40px;"
></video>
- <p class="center">
- <img class="img-g" alt="" src="image/i0007-1.jpg" />
- </p>
- <h2 class="lefth2" id="b003">
- <img class="img-gn" alt="" src="image/czysj.jpg" />
- </h2>
</div>
<ul>
<li class="fl ju-end mr-40">
@@ -109,6 +104,9 @@
class="w100 mb-40"
/>
<div class="padding-96">
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
+ </h2>
<div class="bj1">
<p class="block">
<img
@@ -133,7 +131,6 @@
鍏呭垎鐞嗚В鍙よ瘲琛ㄨ揪鐨勬儏鎰燂紝鏍规嵁宸插鑸炶箞鍏冪礌锛屽垱缂栧甫鏈夐�佸埆鎰忓懗鐨勫崟涓�鑸炶箞鍔ㄤ綔鎴栭�犲瀷鍚с��
</p>
</div>
- <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
</div>
<ul class="pb-box">
<li class="ml-40">
diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue
index b71081b..6fae6b3 100644
--- a/src/books/artAndDance/view/components/chapter002.vue
+++ b/src/books/artAndDance/view/components/chapter002.vue
@@ -115,6 +115,7 @@
x5-playsinline=""
controls
class="w100"
+ style="margin-top: 40px;"
></video>
<h2 class="lefth2 mt-40" id="b007">
<img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
diff --git a/src/books/artAndDance/view/components/chapter003.vue b/src/books/artAndDance/view/components/chapter003.vue
index 55d0e3d..22e319f 100644
--- a/src/books/artAndDance/view/components/chapter003.vue
+++ b/src/books/artAndDance/view/components/chapter003.vue
@@ -79,13 +79,8 @@
x5-playsinline=""
controls
class="w100"
+ style="margin-top: 40px;"
></video>
- <p class="center">
- <img class="img-g" alt="" src="image/i0007-1.jpg" />
- </p>
- <h2 class="lefth2" id="b003">
- <img class="img-gn" alt="" src="image/czysj.jpg" />
- </h2>
</div>
<ul>
<li class="fl ju-end mr-40">
@@ -108,6 +103,9 @@
class="w100 mb-40"
/>
<div class="padding-96">
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
+ </h2>
<div class="bj1">
<p class="block">
<img
@@ -132,7 +130,6 @@
瑙傚療鐢熸椿涓挀楸艰�呯殑褰㈣薄锛屾牴鎹凡瀛﹁垶韫堝厓绱狅紝鍒涚紪鍑烘柊鐨勫崟涓�鑸炶箞鍔ㄤ綔鎴栬�呴�犲瀷鍚с��
</p>
</div>
- <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
</div>
<ul class="pb-box">
<li class="ml-40">
diff --git a/src/books/artAndDance/view/components/chapter004.vue b/src/books/artAndDance/view/components/chapter004.vue
index 95c2859..eddb74d 100644
--- a/src/books/artAndDance/view/components/chapter004.vue
+++ b/src/books/artAndDance/view/components/chapter004.vue
@@ -83,13 +83,8 @@
x5-playsinline=""
controls
class="w100"
+ style="margin-top: 40px;"
></video>
- <p class="center">
- <img class="img-g" alt="" src="image/i0007-1.jpg" />
- </p>
- <h2 class="lefth2" id="b003">
- <img class="img-gn" alt="" src="image/czysj.jpg" />
- </h2>
</div>
<ul>
<li class="fl ju-end mr-40">
@@ -112,6 +107,9 @@
class="w100 mb-40"
/>
<div class="padding-96">
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
+ </h2>
<div class="bj1">
<p class="block">
<img
@@ -136,7 +134,6 @@
璇锋�濊�冧竴涓嬶紝闄や簡鑸炶箞涓�滃彧鍦ㄦ灞变腑鈥濈殑鍔ㄤ綔涔嬪锛岃繕鏈変粈涔堣垶韫堝姩浣滀篃鍙互浣撶幇杩欏彞璇楃殑鍚箟鍛紵
</p>
</div>
- <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
</div>
<ul class="pb-box">
<li class="ml-40">
diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue
index 9c11b04..bc95185 100644
--- a/src/books/artAndDance/view/components/chapter005.vue
+++ b/src/books/artAndDance/view/components/chapter005.vue
@@ -127,6 +127,9 @@
class="w100"
style="margin:38px 0"
></video>
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
+ </h2>
<div class="bj1">
<p class="block">
<img
@@ -151,7 +154,6 @@
鏍规嵁鏈崟鍏冩墍瀛︾殑鑸炶箞鍏冪礌浠ュ強鍙よ瘲瀵撴剰锛屽彂鎸ユ兂璞★紝鍒涚紪鏂扮殑鍗曚竴鑸炶箞鍔ㄤ綔鎴栭�犲瀷鍚с��
</p>
</div>
- <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
</div>
<ul>
<li class="ml-40">
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index f33c54e..eda72e8 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -11,12 +11,12 @@
</div>
<div class="page-box" page="3">
<div v-if="showPageList.indexOf(3) > -1">
- <ul class="fl fl-cl ju-bt">
+ <ul class="fl fl-cl ju-bt pg-mh">
<li>
<img src="../../assets/images/pageHeader.png" alt="" class="w100" />
</li>
<li>
- <div class="bodystyle">
+ <div class="bodystyle" style="margin-bottom: 100px">
<h1 id="a003" class="front">缂栧浼�</h1>
<hr />
<p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p>
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 628befe..78947f5 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -1,5 +1,8 @@
<template>
<div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></div>
+ </div>
<div
class="page-content"
:style="{
@@ -13,7 +16,6 @@
:showPageList="loadPageList"
></pageHeader>
<chapterOne
- @saveCharacters="saveCharacters"
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
></chapterOne>
@@ -69,8 +71,9 @@
observer: null,
loadPageObserver: null,
loadPageList: [],
- questionData: {},
+ questionDataMap: {},
renderSignMap: {},
+ highlightData: null,
};
},
computed: {
@@ -108,6 +111,14 @@
}, 200);
},
},
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
+ this.container ? this.container : document
+ ).querySelector(".page-main");
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ },
+ },
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -134,6 +145,14 @@
// 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
delSign: (data) => {
this.delSign(data);
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(data);
},
});
}
@@ -175,9 +194,36 @@
// });
// }, 2000);
// }, 5000);
- // }, 1000);
+
+ // 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: {
+ // setZoom1() {
+ // let scale = this.$store.state.qiankun.scale + 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // setZoom2() {
+ // let scale = this.$store.state.qiankun.scale - 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
// 婊氬姩鐩戝惉
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
@@ -270,6 +316,10 @@
// 娓叉煋鏍囪
renderSign(type, data) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
const existence = (
this.container ? this.container : document
).querySelector(`[dataid="${data.id}"]`);
@@ -279,10 +329,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) {
@@ -458,6 +505,7 @@
});
},
getParentWithClass(element, className) {
+ console.log(element, className, "element, className");
while (element.parentElement) {
element = element.parentElement;
if (element.classList.contains(className)) {
@@ -507,11 +555,11 @@
"chapter"
);
const catalog = catalogDom.getAttribute("num");
- // if (!this.questionData[page]) {
+ // if (!this.questionDataMap[page]) {
// if (testData && testData[catalog]) {
// if (testData[catalog][page]) {
// if (Array.isArray(testData[catalog][page])) {
- // this.questionData[page] = await getQuestionList(
+ // this.questionDataMap[page] = await getQuestionList(
// page,
// testData[catalog][page],
// this.config.activeBook
@@ -525,9 +573,9 @@
// this.config.activeBook
// );
// }
- // this.questionData[page] = obj;
+ // this.questionDataMap[page] = obj;
// }
- // console.log("棰樼洰", this.questionData);
+ // console.log("棰樼洰", this.questionDataMap);
// }
// }
// }
@@ -540,6 +588,36 @@
this.renderSign(key, item);
});
}
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = 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椤�
@@ -644,18 +722,114 @@
});
}
},
- // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
- saveCharacters(event, word) {
- console.log("鐢熷兓瀛�", event, word);
- if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
- this.$store.state.qiankun.chooseWords({
- type: "word",
- word,
- x: event.pageX,
- y: event.pageY,
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ pageHeader,
+ chapterOne,
+ chapterTwo,
+ chapterThree,
+ chapterFour,
+ chapterFive,
+ chapterSix,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ },
});
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇椤电爜
+ const pageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelectorAll(".page-box");
+ const pages = [];
+ for (let i = 0; i < pageDom.length; i++) {
+ const pageDomItem = pageDom[i];
+ pages.push(Number(pageDomItem.getAttribute("page")));
+ }
+ // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ // 閬嶅巻椤电爜
+ if (pages.length) {
+ for (let i = 0; i < pages.length; i++) {
+ const pageNum = pages[i];
+ // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [pageNum],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇瀵瑰簲椤甸潰dom
+ const thisPageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelector(`[page="${pageNum}"]`);
+ if (thisPageDom) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = 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(keyword);
+ if (txtIndex > -1) {
+ // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+ searchResult.push({
+ page: pageNum,
+ catalog: catalogIndex,
+ txt: textDom.textContent,
+ txtIndex: txtIndex,
+ });
+ }
+ }
+ // 缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ }
+ }
+ }
}
- // chooseWords
+ // 杈撳嚭鎼滅储缁撴灉
+ console.log(searchResult);
+ return searchResult;
+ },
+ // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+ searchItemLocation(data) {
+ // 璁板綍楂樹寒淇℃伅
+ this.highlightData = data;
+ // 璺宠浆
+ this.gotoPage(data.catalog, data.page, () => {});
},
},
components: {
@@ -665,7 +839,7 @@
chapterThree,
chapterFour,
chapterFive,
- chapterSix
+ chapterSix,
},
};
</script>
diff --git a/src/books/childHealth/view/components/pageHeader/evenHeader.vue b/src/books/childHealth/view/components/pageHeader/evenHeader.vue
deleted file mode 100644
index a5208e4..0000000
--- a/src/books/childHealth/view/components/pageHeader/evenHeader.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
- <div class="header-box">
- <div class="header-border-box"></div>
- <div class="header-num-box">
- <span class="fw-b italic">{{num}}</span>
- <span class="ml-30">瀛﹀墠鍎跨鍗敓涓庝繚鍋ワ紙绗�3鐗堬級</span>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: "even-header",
- props:["num"],
- methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/books/childHealth/view/components/pageHeader/oddHeader.vue b/src/books/childHealth/view/components/pageHeader/oddHeader.vue
deleted file mode 100644
index eb612fc..0000000
--- a/src/books/childHealth/view/components/pageHeader/oddHeader.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
- <div class="page-header-box">
- <span class="page-header-text" v-if="special == 1"
- >涓撻涓� 瀛﹀墠鍎跨鐢熺悊鍙戝睍鐗圭偣涓庝繚鍋�</span
- >
- <span class="page-header-text" v-if="special == 2"
- >涓撻浜� 瀛﹀墠鍎跨鐨勭敓闀垮彂鑲�</span
- >
- <span class="page-header-text" v-if="special == 3"
- >涓撻涓� 瀛﹀墠鍎跨蹇冮噷鍙戝睍鐗圭偣涓庝繚鍋�</span
- >
- <span class="page-header-text" v-if="special == 4"
- >涓撻鍥� 瀛﹀墠鍎跨鍋ュ悍璇勪环</span
- >
- <span class="page-header-text" v-if="special == 5"
- >涓撻浜� 瀛﹀墠鍎跨钀ュ吇鍗敓涓庝繚鍋�</span
- >
- <span class="page-header-text" v-if="special == 6"
- >涓撻鍏� 瀛﹀墠鍎跨鍚勫勾榫勬湡鐨勭壒鐐逛笌淇濆仴</span
- >
- <span class="page-header-text" v-if="special == 7"
- >涓撻涓� 瀛﹀墠鍎跨鐤剧梾鍙婂叾棰勯槻</span
- >
- <span class="page-header-text" v-if="special == 8"
- >涓撻鍏� 瀛﹀墠鍎跨甯哥敤鎶ょ悊涓庢�ユ晳鎶�鏈�</span
- >
- <span class="page-header-text" v-if="special == 9"
- >涓撻涔� 瀛﹀墠鍎跨鐢熸椿淇濆仴鍒跺害</span
- >
- <span class="page-header-text" v-if="special == 10"
- >涓撻涔� 鎵樺辜鏈烘瀯鐨勭幆澧冨崼鐢�</span
- >
- <span class="page-header-text" v-if="special == 11"
- >缁煎悎浜戞祴璇�</span
- >
- <span class="page-header-text" v-if="special == 12"
- >鍙傝�冩枃鐚�</span
- >
- <span class="page-header-num">{{ num }}</span>
- </div>
-</template>
-
-<script>
-export default {
- name: "even-header",
- props: ["special", "num"],
- methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/books/childHealth/view/content/components/header.vue b/src/books/childHealth/view/content/components/header.vue
index 7bd41bf..4e2b6a5 100644
--- a/src/books/childHealth/view/content/components/header.vue
+++ b/src/books/childHealth/view/content/components/header.vue
@@ -193,10 +193,8 @@
</template>
<script>
-import evenHeaderVue from "../../components/pageHeader/evenHeader.vue";
export default {
name: "page-header",
- components: { evenHeaderVue },
props: {
showPageList: {
type: Array,
diff --git a/src/books/embedded/view/components/chapter001.vue b/src/books/embedded/view/components/chapter001.vue
index 9a59f99..c8a686f 100644
--- a/src/books/embedded/view/components/chapter001.vue
+++ b/src/books/embedded/view/components/chapter001.vue
@@ -51,10 +51,12 @@
闅忕潃鍚嶱C鏃朵唬鐨勫埌鏉ワ紝鍦ㄥ埗閫犱笟棰嗗煙鏇存敞閲嶄娇鐢ㄧ鍚堝叾鐗瑰畾闇�姹傚苟甯︽湁鏅鸿兘鐨勫祵鍏ュ紡宸ヤ笟鎺у埗缁勬�佽蒋浠讹紝鑰屽祵鍏ュ紡缁勬�佽蒋浠剁壒鍏风殑鎸夊姛鑳藉壀瑁佺殑鐗规�э紝浠ュ強鍏跺唴宓岀殑瀹炴椂澶氫换鍔℃搷浣滅郴缁燂紝鍙繚璇佹暣涓祵鍏ョ郴缁熶綋绉皬銆佹垚鏈綆銆佸疄鏃舵�ч珮銆佸彲闈犳�ч珮鐨勫悓鏃讹紝杩樻柟渚夸笉鍏峰宓屽叆寮忚蒋浠跺紑鍙戠粡楠岀殑鐢ㄦ埛鍦ㄦ瀬鐭殑鏃堕棿鍐咃紝浣跨敤宓屽叆寮忕粍鎬佽蒋浠跺揩閫熷紑鍙戝畬鎴愪竴涓祵鍏ュ紡绯荤粺锛屽苟鏋佸ぇ鍦板姞蹇簡宓屽叆寮忎骇鍝佽繘鍏ュ競鍦虹殑閫熷害锛岃�屼笖浣夸骇鍝佸叿鏈変赴瀵岀殑浜烘満鐣岄潰銆傚寳浜槅浠戦�氭�佸叕鍙窶CGS缁勬�佽蒋浠讹紝閫氳繃澶у姏鍔犲己瀵瑰伐鎺х‖浠朵骇鍝佺殑椹卞姩鏀寔鍜屾彁鍗囪蒋浠跺唴閮ㄥ姛
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">1</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">1</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 2 -->
@@ -293,10 +295,12 @@
锛�2锛夎澶囩獥鍙ｆ槸MCGS宓屽叆鐗堢郴缁熶笌澶栧洿璁惧鑱旂郴鐨勫獟浠嬨�傝澶囩獥鍙ｄ笓闂ㄧ敤鏉ユ斁缃笉鍚�
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">3</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">3</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 4 -->
@@ -457,10 +461,12 @@
锛�5锛塗PC7062K鍚姩銆備娇鐢�24V鐩存祦鐢垫簮缁橳PC渚涚數锛屽紑鏈哄惎鍔ㄥ悗灞忓箷鍑虹幇鈥滄鍦ㄥ惎鍔ㄢ�濇彁绀鸿繘搴︽潯锛屾鏃朵笉闇�浠讳綍鎿嶄綔鑷姩杩涘叆宸ョ▼杩愯鐣岄潰锛屽鍥�1-11鎵�绀恒��
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">5</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">5</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 6 -->
@@ -741,10 +747,12 @@
鍦ㄥ畨瑁呯▼搴忕獥鍙ｄ腑鍗曞嚮鈥滃畨瑁呯粍鎬佽蒋浠垛�濇寜閽紝寮瑰嚭瀹夎绋嬪簭绐楀彛銆傚崟鍑烩�滀笅涓�姝モ�濇寜閽紝鍚姩瀹夎绋嬪簭锛屽鍥�1-16鎵�绀恒��
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">7</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">7</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 8 -->
@@ -1116,10 +1124,12 @@
锛�2锛夊崟鍑烩�滅獥鍙ｅ睘鎬р�濇寜閽紝寮瑰嚭鈥滅敤鎴风獥鍙ｅ睘鎬ц缃�濆璇濇锛屽湪鈥滃熀鏈睘鎬р�濋�夐」鍗★紝灏嗏�滅獥鍙ｅ悕绉扳�濅慨鏀逛负鈥滃父鐢ㄦ瀯浠朵娇鐢ㄢ�濓紝鍗曞嚮鈥滅‘璁も�濇寜閽繘琛屼繚瀛橈紝濡傚浘1-23鎵�绀恒��
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">9</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">9</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 10 -->
@@ -1274,10 +1284,12 @@
锛�6锛夊崟鍑诲伐鍏风涓殑鈥滆緭鍏ユ鈥濇寜閽紝鍦ㄧ獥鍙ｆ寜浣忛紶鏍囧乏閿紝鎷栨斁鍑轰袱涓竴瀹氬ぇ灏忕殑鈥滆緭鍏ユ鈥濓紝鍒嗗埆鎽嗘斁鍦ㄢ�滅姸鎬佹樉绀�1锛氣�濇爣绛俱�佲�滅姸鎬佹樉绀�2锛氣�濇爣绛剧殑鏃佽竟浣嶇疆锛屽鍥�1-32鎵�绀恒��
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">11</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">11</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 12 -->
@@ -1485,10 +1497,12 @@
/>鎸夐挳锛岃繘琛屼笅杞介厤缃�傚崟鍑烩�滆仈鏈鸿繍琛屸�濇寜閽紝杩炴帴鏂瑰紡閫夋嫨鈥淭CP/IP缃戠粶閫氫俊鈥濓紝璁剧疆瑙︽懜灞廔P涓庤绠楁満IP鍦ㄥ悓涓�缃戞鍐咃紝鍗曞嚮鈥滈�氫俊娴嬭瘯鈥濇寜閽紝閫�
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">13</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">13</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
<!-- 14 -->
@@ -1881,10 +1895,12 @@
></textarea>
</p>
</div>
- <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
- <li class="footer-num">15</li>
- <li class="footer-box"></li>
- </ul>
+ <div class="fl ju-ed">
+ <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
+ <li class="footer-num">15</li>
+ <li class="footer-box"></li>
+ </ul>
+ </div>
</div>
</div>
</div>
diff --git a/src/books/embedded/view/components/index.vue b/src/books/embedded/view/components/index.vue
index aa243a5..7a56f5c 100644
--- a/src/books/embedded/view/components/index.vue
+++ b/src/books/embedded/view/components/index.vue
@@ -1,5 +1,8 @@
<template>
<div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></div>
+ </div>
<div
class="page-content"
:style="{
@@ -40,8 +43,9 @@
observer: null,
loadPageObserver: null,
loadPageList: [],
- questionData: {},
- renderSignMap: {}
+ questionDataMap: {},
+ renderSignMap: {},
+ highlightData: null,
};
},
computed: {
@@ -50,7 +54,7 @@
},
pageZoom() {
return this.$store.state.qiankun.scale / 100;
- }
+ },
},
watch: {
showCatalogList: {
@@ -61,7 +65,7 @@
) {
// 璋冪敤鐖跺眰鏂规硶
this.$store.state.qiankun.catalogChange({
- showCatalogList: newVal
+ showCatalogList: newVal,
});
}
// 鍚姩椤电爜瑙傚療
@@ -69,17 +73,24 @@
this.initObservation();
this.initThemeColor();
}, 500);
- }
+ },
},
loadPageList: {
handler(newVal, oldVal) {
- console.log(newVal, "this.loadPageList");
setTimeout(() => {
this.initSwiper();
this.initViewer();
}, 200);
- }
- }
+ },
+ },
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
+ this.container ? this.container : document
+ ).querySelector(".page-main");
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ },
+ },
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -106,7 +117,15 @@
// 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
delSign: (data) => {
this.delSign(data);
- }
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(data);
+ },
});
}
@@ -115,13 +134,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锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
});
// 鍚姩椤电爜瑙傚療
@@ -147,9 +166,36 @@
// });
// }, 2000);
// }, 5000);
- // }, 1000);
+
+ // 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: {
+ // setZoom1() {
+ // let scale = this.$store.state.qiankun.scale + 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // setZoom2() {
+ // let scale = this.$store.state.qiankun.scale - 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
// 婊氬姩鐩戝惉
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
@@ -205,7 +251,7 @@
this.showCatalogList = [
this.catalogLength - 2,
this.catalogLength - 1,
- this.catalogLength
+ this.catalogLength,
];
} else {
this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -232,6 +278,7 @@
// 绔嬪嵆娓叉煋
this.renderSign(type, data);
}
+
// 鍌ㄥ瓨鏁版嵁
if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
if (!this.renderSignMap[type][data.page])
@@ -241,6 +288,10 @@
// 娓叉煋鏍囪
renderSign(type, data) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
const existence = (
this.container ? this.container : document
).querySelector(`[dataid="${data.id}"]`);
@@ -250,10 +301,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) {
@@ -429,6 +477,7 @@
});
},
getParentWithClass(element, className) {
+ console.log(element, className, "element, className");
while (element.parentElement) {
element = element.parentElement;
if (element.classList.contains(className)) {
@@ -458,7 +507,7 @@
this.$store.state.qiankun.pageChange({
page: page,
catalog: catalog,
- text
+ text,
});
// const sections = Array.from(document.querySelectorAll(".section"));
//sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
@@ -478,16 +527,15 @@
"chapter"
);
const catalog = catalogDom.getAttribute("num");
- // if (!this.questionData[page]) {
+ // if (!this.questionDataMap[page]) {
// if (testData && testData[catalog]) {
// if (testData[catalog][page]) {
// if (Array.isArray(testData[catalog][page])) {
- // this.questionData[page] = await getQuestionList(
+ // this.questionDataMap[page] = await getQuestionList(
// page,
// testData[catalog][page],
// this.config.activeBook
// );
-
// } else {
// const obj = {};
// for (let key in testData[catalog][page]) {
@@ -497,9 +545,9 @@
// this.config.activeBook
// );
// }
- // this.questionData[page] = obj;
+ // this.questionDataMap[page] = obj;
// }
- // console.log('棰樼洰',this.questionData);
+ // console.log("棰樼洰", this.questionDataMap);
// }
// }
// }
@@ -512,6 +560,36 @@
this.renderSign(key, item);
});
}
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = 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椤�
@@ -564,40 +642,40 @@
for (let i = 0; i < pptDoms.length; i++) {
const dom = pptDoms[i];
new Swiper(dom, {
- loop: false, // 鏃犵紳
- autoplay: false,
- paginationClickable: true,
- slidesPerView: 1, // 涓�缁勪笁涓�
- spaceBetween: 30, // 闂撮殧
- // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
- navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-next"
- ),
- prevEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-prev"
- ),
- },
- // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
- observer: true,
- observeParents: true,
- on: {
- init:(value) => {
- let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
- let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
- var paginationInfoEl = dom.querySelector('.pageBox');
- if(paginationInfoEl)
- paginationInfoEl.textContent = currentPage + '/' + totalPages;
+ loop: false, // 鏃犵紳
+ autoplay: false,
+ paginationClickable: true,
+ slidesPerView: 1, // 涓�缁勪笁涓�
+ spaceBetween: 30, // 闂撮殧
+ // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+ navigation: {
+ nextEl: (this.container ? this.container : document).querySelector(
+ ".swiper-button-next"
+ ),
+ prevEl: (this.container ? this.container : document).querySelector(
+ ".swiper-button-prev"
+ ),
},
- slideChange:(value) => {
- let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
- let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
- var paginationInfoEl = dom.querySelector('.pageBox');
- if(paginationInfoEl)
- paginationInfoEl.textContent = currentPage + '/' + totalPages;
+ // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+ observer: true,
+ observeParents: true,
+ on: {
+ init: (value) => {
+ let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+ let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+ var paginationInfoEl = dom.querySelector(".pageBox");
+ if (paginationInfoEl)
+ paginationInfoEl.textContent = currentPage + "/" + totalPages;
+ },
+ slideChange: (value) => {
+ let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+ let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+ var paginationInfoEl = dom.querySelector(".pageBox");
+ if (paginationInfoEl)
+ paginationInfoEl.textContent = currentPage + "/" + totalPages;
+ },
},
- },
- });
+ });
}
},
initViewer() {
@@ -607,18 +685,124 @@
for (let i = 0; i < doms.length; i++) {
const dom = doms[i];
new Viewer(dom, {
- container: (this.container ? this.container.querySelector("#app") : "body"),
+ container: this.container
+ ? this.container.querySelector("#app")
+ : "body",
navbar: true, // 鏄剧ず瀵艰埅鏍�
toolbar: true, // 鏄剧ず宸ュ叿鏍�
- title: true // 鏄剧ず鏍囬
+ title: true, // 鏄剧ず鏍囬
});
}
- }
+ },
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ pageHeader,
+ chapterOne,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇椤电爜
+ const pageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelectorAll(".page-box");
+ const pages = [];
+ for (let i = 0; i < pageDom.length; i++) {
+ const pageDomItem = pageDom[i];
+ pages.push(Number(pageDomItem.getAttribute("page")));
+ }
+ // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ // 閬嶅巻椤电爜
+ if (pages.length) {
+ for (let i = 0; i < pages.length; i++) {
+ const pageNum = pages[i];
+ // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [pageNum],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇瀵瑰簲椤甸潰dom
+ const thisPageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelector(`[page="${pageNum}"]`);
+ if (thisPageDom) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = 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(keyword);
+ if (txtIndex > -1) {
+ // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+ searchResult.push({
+ page: pageNum,
+ catalog: catalogIndex,
+ txt: textDom.textContent,
+ txtIndex: txtIndex,
+ });
+ }
+ }
+ // 缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ }
+ }
+ }
+ }
+ // 杈撳嚭鎼滅储缁撴灉
+ console.log(searchResult);
+ return searchResult;
+ },
+ // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+ searchItemLocation(data) {
+ // 璁板綍楂樹寒淇℃伅
+ this.highlightData = data;
+ // 璺宠浆
+ this.gotoPage(data.catalog, data.page, () => {});
+ },
},
components: {
pageHeader,
chapterOne,
- }
+ },
};
</script>
<style scoped lang="less">
--
Gitblit v1.9.1