| | |
| | | <chapterOne |
| | | v-if="showCatalogList.indexOf(1) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterOne> |
| | | <chapterTwo |
| | | v-if="showCatalogList.indexOf(2) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterTwo> |
| | | <chapterThree |
| | | v-if="showCatalogList.indexOf(3) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterThree> |
| | | <chapterFour |
| | | v-if="showCatalogList.indexOf(4) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterFour> |
| | | <chapterFive |
| | | v-if="showCatalogList.indexOf(5) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterFive> |
| | | <chapterSix |
| | | v-if="showCatalogList.indexOf(6) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterSix> |
| | | <chapterSeven |
| | | v-if="showCatalogList.indexOf(7) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterSeven> |
| | | <chapterEight |
| | | v-if="showCatalogList.indexOf(8) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterEight> |
| | | <chapterNine |
| | | v-if="showCatalogList.indexOf(9) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterNine> |
| | | <chapterTen |
| | | v-if="showCatalogList.indexOf(10) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterTen> |
| | | <chapterEleven |
| | | v-if="showCatalogList.indexOf(11) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | ></chapterEleven> |
| | | <chapterTwelve |
| | | v-if="showCatalogList.indexOf(12) > -1" |
| | |
| | | import chapterThirteen from "./components/chapter013.vue"; |
| | | import NoteIcon from "@/assets/images/biji.png"; |
| | | import _ from "lodash"; |
| | | import getQuestionList from "@/assets/methods/examination"; |
| | | import testData from "../../assets/examinationList"; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | throttledScrollHandler: null, |
| | | observer: null, |
| | | loadPageObserver: null, |
| | | loadPageList: [] |
| | | loadPageList: [], |
| | | questionData: {}, |
| | | }; |
| | | }, |
| | | provide() { |
| | | return { |
| | | changeQuestionData:this.changeQuestionData |
| | | } |
| | | }, |
| | | watch: { |
| | | showCatalogList: { |
| | |
| | | ) { |
| | | // 调用父层方法 |
| | | this.$store.state.qiankun.catalogChange({ |
| | | showCatalogList: newVal |
| | | showCatalogList: newVal, |
| | | }); |
| | | } |
| | | // 启动页码观察 |
| | |
| | | this.initObservation(); |
| | | this.initThemeColor(); |
| | | }, 500); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | |
| | | // 删除笔记、高亮、划线 |
| | | delSign: (data) => { |
| | | this.delSign(data); |
| | | } |
| | | }, |
| | | }); |
| | | } |
| | | |
| | |
| | | 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,表示当目标元素一半或更多显示在视窗中时触发回调函数。 |
| | | }); |
| | | |
| | | // 启动页码观察 |
| | |
| | | this.showCatalogList = [ |
| | | this.catalogLength - 2, |
| | | this.catalogLength - 1, |
| | | this.catalogLength |
| | | this.catalogLength, |
| | | ]; |
| | | } else { |
| | | this.showCatalogList = [catalog - 1, catalog, catalog + 1]; |
| | |
| | | // 笔记 |
| | | pageDom.innerHTML = pageDom.innerHTML.replace( |
| | | reg, |
| | | `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}"/></span>` |
| | | `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut">${data.txt}<img src="${NoteIcon}"/></span>` |
| | | ); |
| | | break; |
| | | } |
| | |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) |
| | | this.$store.state.qiankun.pageChange({ |
| | | page: page, |
| | | catalog: catalog |
| | | catalog: catalog, |
| | | }); |
| | | // const sections = Array.from(document.querySelectorAll(".section")); |
| | | //sections:获取所有具有 .section 类名的元素,并转换为数组。 |
| | |
| | | }); |
| | | }, |
| | | loadPageCallback(entries, observer) { |
| | | entries.forEach((entry) => { |
| | | entries.forEach(async (entry) => { |
| | | if (entry.isIntersecting) { |
| | | const target = entry.target; |
| | | const page = target.getAttribute("page"); |
| | | if (this.loadPageList.indexOf(page) == -1) { |
| | | // |
| | | const catalogDom = this.tool.getParentNodeByClassName( |
| | | target, |
| | | "chapter" |
| | | ); |
| | | const catalog = catalogDom.getAttribute("num"); |
| | | if (!this.questionData[page]) { |
| | | if (testData && testData[catalog]) { |
| | | console.log(testData[catalog]); |
| | | if (testData[catalog][page]) { |
| | | console.log(testData[catalog][page]); |
| | | if (Array.isArray(testData[catalog][page])) { |
| | | this.questionData[page] = await getQuestionList( |
| | | [], |
| | | testData[catalog][page], |
| | | this.config.activeBook |
| | | ) |
| | | } else { |
| | | const obj = {}; |
| | | for (let key in testData[catalog][page]) { |
| | | console.log("key", key, testData[catalog][page][key]); |
| | | obj[key] = await getQuestionList( |
| | | [], |
| | | testData[catalog][page][key], |
| | | this.config.activeBook |
| | | ); |
| | | } |
| | | this.questionData[page] = obj; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.loadPageList.push(Number(page)); |
| | | console.log(this.loadPageList,"this.loadPageList"); |
| | | console.log(this.loadPageList, "this.loadPageList", catalog); |
| | | if (this.loadPageList.length > 5) { |
| | | // 超过三章隐藏顶部一章 |
| | | // 超过5页 |
| | | this.loadPageList.shift(); |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | changeQuestionData(page,data) { |
| | | console.log('变化',page,data); |
| | | this.$props.questionData[page] = data |
| | | }, |
| | | }, |
| | | components: { |
| | | pageHeader, |
| | |
| | | chapterTen, |
| | | chapterEleven, |
| | | chapterTwelve, |
| | | chapterThirteen |
| | | } |
| | | chapterThirteen, |
| | | }, |
| | | }; |
| | | </script> |
| | | |