From ea614cd7d75f68c9faf759cd628bef8a83f55835 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 15 五月 2024 18:49:25 +0800
Subject: [PATCH] 章节优化
---
src/books/childHealth/view/content/index.vue | 128 ++++++++++++++++++++++++++++++++++++++++--
1 files changed, 121 insertions(+), 7 deletions(-)
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 8caa2c9..de66168 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -3,7 +3,6 @@
<div class="page-content">
<pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
<chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
- <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
<chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>
<chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree>
<chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour>
@@ -37,9 +36,8 @@
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() {
return {
@@ -51,6 +49,21 @@
throttledScrollHandler: null
};
},
+ watch: {
+ showCatalogList: {
+ handler(newVal) {
+ if (
+ this.$store.state.qiankun &&
+ this.$store.state.qiankun.catalogChange
+ ) {
+ // 璋冪敤鐖跺眰鏂规硶
+ this.$store.state.qiankun.catalogChange({
+ showCatalogList: newVal
+ });
+ }
+ }
+ }
+ },
mounted() {
// 榛樿鍔犺浇绔犺妭
this.showCatalogList = [0];
@@ -60,23 +73,41 @@
this.throttleThreshold,
{ leading: true, trailing: false }
);
- // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+ // 瀹氫箟瀛愬眰鏂规硶
if (this.setGlobalState) {
+ // 鎻愪緵椤甸潰璺宠浆鍔熻兘
this.setGlobalState({
gotoPage: (catalog, page) => {
this.gotoPage(catalog, page);
+ },
+ // 娓叉煋绗旇銆侀珮浜�佸垝绾�
+ renderSign: (type, data) => {
+ this.renderSign(type, data);
+ },
+ // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
+ delSign: (data) => {
+ this.delSign(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) {
+ // 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
if (
@@ -99,6 +130,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
+ // 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
// 鍒拌揪闃堝��
@@ -112,9 +144,19 @@
}
}
}
+ // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
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) {
@@ -132,16 +174,88 @@
}
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 existence = (
+ this.container ? this.container : document
+ ).querySelector(`[dataid="${data.id}"]`);
+ // 鍘婚噸
+ if (!existence) {
+ 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 datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight">${data.txt}</span>`
+ );
+ break;
+ case "Dashing":
+ // 鍒掔嚎
+ pageDom.innerHTML = pageDom.innerHTML.replace(
+ reg,
+ `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline">${data.txt}</span>`
+ );
+ break;
+ case "Note":
+ // 绗旇
+ pageDom.innerHTML = pageDom.innerHTML.replace(
+ reg,
+ `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline">${data.txt}</span><img src="${NoteIcon}" style="cursor: pointer" />`
+ );
+ break;
+ }
+ // 缁戝畾浜嬩欢
+ const thisAddDom = (
+ this.container ? this.container : document
+ ).querySelector(`[dataid="${id}"]`);
+ thisAddDom.addEventListener("click", function (e) {
+ console.log("鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚嬶紝閫氳繃杩欎釜鍙傛暟鑾峰彇绫诲瀷", e);
+ if (this.$store.state.qiankun && this.$store.state.qiankun.signClick)
+ this.$store.state.qiankun.signClick(type, data);
+ });
+ }
+ },
+ delSign({ ids, type }) {
+ if (ids && ids.length) {
+ for (let i = 0; i < ids.length; i++) {
+ const id = ids[i];
+ const dom = (
+ this.container ? this.container : document
+ ).querySelector(`[dataid="${id}"]`);
+ dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+ dom.outerHTML,
+ dom.outerText
+ );
+ }
+ }
+ if (type) {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(`[datatype="${type}"]`);
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+ dom.outerHTML,
+ dom.outerText
+ );
+ }
+ }
}
},
components: {
--
Gitblit v1.9.1