| | |
| | | <!-- eslint-disable vue/multi-word-component-names --> |
| | | <template> |
| | | <div class="page-main" @scroll="throttledScrollHandler"> |
| | | <div |
| | |
| | | transform: `scale(${pageZoom ? pageZoom : 1})`, |
| | | }" |
| | | > |
| | | <front001 v-if="showCatalogList.indexOf(0) > -1" /> |
| | | <ChapterOne v-if="showCatalogList.indexOf(1) > -1" /> |
| | | <ChapterTwo v-if="showCatalogList.indexOf(2) > -1" /> |
| | | <ChapterThree v-if="showCatalogList.indexOf(3) > -1" /> |
| | | <ChapterFour v-if="showCatalogList.indexOf(4) > -1" /> |
| | | <ChapterFive v-if="showCatalogList.indexOf(5) > -1" /> |
| | | <chapterSix v-if="showCatalogList.indexOf(6) > -1" /> |
| | | <chapterSeven v-if="showCatalogList.indexOf(7) > -1" /> |
| | | <chapterEight v-if="showCatalogList.indexOf(8) > -1" /> |
| | | <chapterNine v-if="showCatalogList.indexOf(9) > -1" /> |
| | | <chapter010 v-if="showCatalogList.indexOf(10) > -1" /> |
| | | <chapter011 v-if="showCatalogList.indexOf(11) > -1" /> |
| | | <chapter012 v-if="showCatalogList.indexOf(12) > -1" /> |
| | | <chapter013 v-if="showCatalogList.indexOf(13) > -1" /> |
| | | <chapter014 v-if="showCatalogList.indexOf(14) > -1" /> |
| | | <chapter015 v-if="showCatalogList.indexOf(15) > -1" /> |
| | | <chapter016 v-if="showCatalogList.indexOf(16) > -1" /> |
| | | <chapter017 v-if="showCatalogList.indexOf(17) > -1" /> |
| | | <chapter018 v-if="showCatalogList.indexOf(18) > -1" /> |
| | | <front001 v-if="showCatalogList.indexOf(1) > -1" /> |
| | | <ChapterOne v-if="showCatalogList.indexOf(2) > -1" /> |
| | | <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" /> |
| | | <ChapterThree v-if="showCatalogList.indexOf(4) > -1" /> |
| | | <ChapterFour v-if="showCatalogList.indexOf(5) > -1" /> |
| | | <ChapterFive v-if="showCatalogList.indexOf(6) > -1" /> |
| | | <chapterSix v-if="showCatalogList.indexOf(7) > -1" /> |
| | | <chapterSeven v-if="showCatalogList.indexOf(8) > -1" /> |
| | | <chapterEight v-if="showCatalogList.indexOf(9) > -1" /> |
| | | <chapterNine v-if="showCatalogList.indexOf(10) > -1" /> |
| | | <chapter010 v-if="showCatalogList.indexOf(11) > -1" /> |
| | | <chapter011 v-if="showCatalogList.indexOf(12) > -1" /> |
| | | <chapter012 v-if="showCatalogList.indexOf(13) > -1" /> |
| | | <chapter013 v-if="showCatalogList.indexOf(14) > -1" /> |
| | | <chapter014 v-if="showCatalogList.indexOf(15) > -1" /> |
| | | <chapter015 v-if="showCatalogList.indexOf(16) > -1" /> |
| | | <chapter016 v-if="showCatalogList.indexOf(17) > -1" /> |
| | | <chapter017 v-if="showCatalogList.indexOf(18) > -1" /> |
| | | <chapter018 v-if="showCatalogList.indexOf(19) > -1" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | catalogLength: 7, // 总章节数 |
| | | catalogLength: 18, // 总章节数 |
| | | showCatalogList: [], // 显示的章节 |
| | | loadThreshold: 300, // 触发加载阈值 |
| | | throttleThreshold: 100, // 节流阈值 |
| | |
| | | }, |
| | | watch: { |
| | | showCatalogList: { |
| | | // eslint-disable-next-line no-unused-vars |
| | | handler(newVal, oldVal) { |
| | | if ( |
| | | this.$store.state.qiankun && |
| | |
| | | showCatalogList: newVal, |
| | | }); |
| | | } |
| | | |
| | | // 启动页码观察 |
| | | setTimeout(() => { |
| | | this.initObservation(); |
| | |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | | this.showCatalogList = [0]; |
| | | this.showCatalogList = [1]; |
| | | // 滚动监听节流 |
| | | this.throttledScrollHandler = _.throttle( |
| | | this.scrollFun, |
| | |
| | | ).getSelection(); |
| | | const txt = selection.toString(); |
| | | if (selection.type != "none" && txt) { |
| | | // eslint-disable-next-line no-unused-vars |
| | | let node = selection.anchorNode.parentNode; |
| | | let pageHtml = this.getParentWithClass( |
| | | selection.anchorNode, |
| | |
| | | } |
| | | }); |
| | | }, |
| | | // eslint-disable-next-line |
| | | getParentWithClass(element, className) { |
| | | while (element.parentElement) { |
| | | element = element.parentElement; |
| | |
| | | } |
| | | } |
| | | }, |
| | | // eslint-disable-next-line no-unused-vars |
| | | pageChangeCallback(entries, observer) { |
| | | //entries:代表观察到的目标元素的集合。 observer:代表观察者对象。 |
| | | entries.forEach((entry) => { |
| | |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |