| | |
| | | <template> |
| | | <div class="page-main" @scroll="throttledScrollHandler"> |
| | | <div |
| | | class="public-books" |
| | | class="public-lifCare" |
| | | @mouseup="handleMouseUp" |
| | | :style="{ |
| | | fontSize: fontSize ? fontSize + 'px' : '16px', |
| | | transform: `scale(${pageZoom ? pageZoom : 1})`, |
| | | transformOrigin: 'center top' |
| | | transformOrigin: 'center top', |
| | | }" |
| | | > |
| | | <front001 v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" /> |
| | | <ChapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <ChapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <ChapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <ChapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" :questionData="questionData"/> |
| | | <chapter010 v-if="showCatalogList.indexOf(11) > -1" :showPageList="loadPageList" /> |
| | | <chapter011 v-if="showCatalogList.indexOf(12) > -1" :showPageList="loadPageList" /> |
| | | <chapter012 v-if="showCatalogList.indexOf(13) > -1" :showPageList="loadPageList" /> |
| | | <chapter013 v-if="showCatalogList.indexOf(14) > -1" :showPageList="loadPageList" /> |
| | | <chapter014 v-if="showCatalogList.indexOf(15) > -1" :showPageList="loadPageList" /> |
| | | <chapter015 v-if="showCatalogList.indexOf(16) > -1" :showPageList="loadPageList" /> |
| | | <chapter016 v-if="showCatalogList.indexOf(17) > -1" :showPageList="loadPageList" /> |
| | | <chapter017 v-if="showCatalogList.indexOf(18) > -1" :showPageList="loadPageList" /> |
| | | <chapter018 v-if="showCatalogList.indexOf(19) > -1" :showPageList="loadPageList" /> |
| | | <front001 |
| | | v-if="showCatalogList.indexOf(1) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <ChapterOne |
| | | v-if="showCatalogList.indexOf(2) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <ChapterTwo |
| | | v-if="showCatalogList.indexOf(3) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <ChapterThree |
| | | v-if="showCatalogList.indexOf(4) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <ChapterFour |
| | | v-if="showCatalogList.indexOf(5) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <ChapterFive |
| | | v-if="showCatalogList.indexOf(6) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <chapterSix |
| | | v-if="showCatalogList.indexOf(7) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <chapterSeven |
| | | v-if="showCatalogList.indexOf(8) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <chapterEight |
| | | v-if="showCatalogList.indexOf(9) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <chapterNine |
| | | v-if="showCatalogList.indexOf(10) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | /> |
| | | <chapter010 |
| | | v-if="showCatalogList.indexOf(11) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter011 |
| | | v-if="showCatalogList.indexOf(12) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter012 |
| | | v-if="showCatalogList.indexOf(13) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter013 |
| | | v-if="showCatalogList.indexOf(14) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter014 |
| | | v-if="showCatalogList.indexOf(15) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter015 |
| | | v-if="showCatalogList.indexOf(16) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter016 |
| | | v-if="showCatalogList.indexOf(17) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter017 |
| | | v-if="showCatalogList.indexOf(18) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | <chapter018 |
| | | v-if="showCatalogList.indexOf(19) > -1" |
| | | :showPageList="loadPageList" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | observer: null, |
| | | loadPageObserver: null, |
| | | loadPageList: [], |
| | | questionData: {} |
| | | questionData: {}, |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | }, |
| | | pageZoom() { |
| | | return this.$store.state.qiankun.scale / 100; |
| | | } |
| | | }, |
| | | }, |
| | | provide() { |
| | | return { |
| | | changeQuestionData: this.changeQuestionData |
| | | changeQuestionData: this.changeQuestionData, |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | ) { |
| | | // 调用父层方法 |
| | | 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]; |
| | |
| | | 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 类名的元素,并转换为数组。 |
| | |
| | | }, |
| | | changeQuestionData(page, data) { |
| | | this.$props.questionData[page] = data; |
| | | } |
| | | }, |
| | | }, |
| | | components: { |
| | | front001, |
| | |
| | | chapter016, |
| | | chapter017, |
| | | chapter018, |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |