| | |
| | | <template> |
| | | <div class="page-main" @scroll="throttledScrollHandler"> |
| | | <div class="page-content"> |
| | | <div |
| | | class="page-content" |
| | | :style="{ |
| | | fontSize: fontSize ? fontSize + 'px' : '16px', |
| | | transform: `scale(${pageZoom ? pageZoom : 1})` |
| | | }" |
| | | > |
| | | <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader> |
| | | <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne> |
| | | <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo> |
| | |
| | | observer: null |
| | | }; |
| | | }, |
| | | computed: { |
| | | fontSize() { |
| | | return this.$store.state.qiankun.fontSize; |
| | | }, |
| | | pageZoom() { |
| | | return this.$store.state.qiankun.scale / 100; |
| | | } |
| | | }, |
| | | watch: { |
| | | showCatalogList: { |
| | | handler(newVal, oldVal) { |
| | |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | | this.showCatalogList = [0]; |
| | | this.showCatalogList = [3]; |
| | | // 滚动监听节流 |
| | | this.throttledScrollHandler = _.throttle( |
| | | this.scrollFun, |
| | |
| | | // 高亮 |
| | | pageDom.innerHTML = pageDom.innerHTML.replace( |
| | | reg, |
| | | `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}')">${data.txt}</span>` |
| | | `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${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" onclick="signClick('Dashing','${data.id}')">${data.txt}</span>` |
| | | `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${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" onclick="signClick('Note','${data.id}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` |
| | | `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` |
| | | ); |
| | | break; |
| | | } |
| | |
| | | } |
| | | }, |
| | | initObservation() { |
| | | const sections = document.querySelectorAll(".page-box"); |
| | | const sections = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".page-box"); |
| | | //observer 观察每个元素,以便在它们进入或离开视窗时触发回调函数。 |
| | | sections.forEach((section) => { |
| | | const isObserver = section.getAttribute("observer"); |