| | |
|---|
| | | <template> |
|---|
| | | <div class="page-main" @scroll="throttledScrollHandler"> |
|---|
| | | <div class="page-content"> |
|---|
| | | <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader> |
|---|
| | | <chapterOne v-if="showCatalogList.indexOf(1) > -1" /> |
|---|
| | | <div class="page-content" :style="{ |
|---|
| | | fontSize: fontSize ? fontSize + 'px' : '16px', |
|---|
| | | transform: `scale(${pageZoom ? pageZoom : 1})`, |
|---|
| | | transformOrigin: 'center top', |
|---|
| | | }"> |
|---|
| | | <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> |
|---|
| | | <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | import chapterOne from "./chapter001.vue"; |
|---|
| | | import NoteIcon from "@/assets/images/biji.png"; |
|---|
| | | import _ from "lodash"; |
|---|
| | | import Swiper from "swiper/bundle"; |
|---|
| | | import "swiper/swiper-bundle.css"; |
|---|
| | | import Viewer from "viewerjs"; |
|---|
| | | import "viewerjs/dist/viewer.css"; |
|---|
| | | export default { |
|---|
| | | name: "pageContent", |
|---|
| | | components: { pageHeader, chapterOne }, |
|---|
| | | computed: { |
|---|
| | | fontSize() { |
|---|
| | | return this.$store.state.qiankun.fontSize; |
|---|
| | | }, |
|---|
| | | pageZoom() { |
|---|
| | | return this.$store.state.qiankun.scale / 100; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | catalogLength: 2, // 总章节数 |
|---|
| | |
|---|
| | | previousScrollTop: 0, |
|---|
| | | throttledScrollHandler: null, |
|---|
| | | observer: null, |
|---|
| | | loadPageObserver: null, |
|---|
| | | loadPageList: [], |
|---|
| | | questionData: {}, |
|---|
| | | testData:{} |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | |
|---|
| | | // 启动页码观察 |
|---|
| | | setTimeout(() => { |
|---|
| | | this.initObservation(); |
|---|
| | | this.initThemeColor(); |
|---|
| | | }, 500); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | loadPageList: { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.initSwiper(); |
|---|
| | | this.initViewer(); |
|---|
| | | }, 200); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // 默认加载章节 |
|---|
| | | this.showCatalogList = [0,1]; |
|---|
| | | this.showCatalogList = [1]; |
|---|
| | | // 滚动监听节流 |
|---|
| | | this.throttledScrollHandler = _.throttle( |
|---|
| | | this.scrollFun, |
|---|
| | |
|---|
| | | threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { |
|---|
| | | root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 |
|---|
| | | rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 |
|---|
| | | threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 启动页码观察 |
|---|
| | | setTimeout(() => { |
|---|
| | | this.initObservation(); |
|---|
| | | this.initThemeColor(); |
|---|
| | | }, 500); |
|---|
| | | |
|---|
| | | // 测试页面跳转 |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.gotoPage(5, 100); |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.renderSign("Note", { |
|---|
| | | // id: "2ACA9359", |
|---|
| | | // txt: "营养素和热量，才能", |
|---|
| | | // page: "100", |
|---|
| | | // type: "Highlight", |
|---|
| | | // color: "#F5E12A" |
|---|
| | | // }); |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.delSign({ |
|---|
| | | // ids: ["2ACA9359"] |
|---|
| | | // }); |
|---|
| | | // }, 2000); |
|---|
| | | // }, 1000); |
|---|
| | | // }, 3000); |
|---|
| | | // this.gotoPage(1, 11); |
|---|
| | | // // setTimeout(() => { |
|---|
| | | // // this.renderSign("Note", { |
|---|
| | | // // id: "2ACA9359", |
|---|
| | | // // txt: "营养素和热量，才能", |
|---|
| | | // // page: "100", |
|---|
| | | // // type: "Highlight", |
|---|
| | | // // color: "#F5E12A" |
|---|
| | | // // }); |
|---|
| | | // // setTimeout(() => { |
|---|
| | | // // this.delSign({ |
|---|
| | | // // ids: ["2ACA9359"] |
|---|
| | | // // }); |
|---|
| | | // // }, 2000); |
|---|
| | | // // }, 1000); |
|---|
| | | // }, 1000); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // 滚动监听 |
|---|
| | |
|---|
| | | console.log("章节错误！"); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 渲染标记 |
|---|
| | | renderSign(type, data) { |
|---|
| | | const existence = ( |
|---|
| | |
|---|
| | | // 笔记 |
|---|
| | | 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}" 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}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` |
|---|
| | | ); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | |
|---|
| | | const sections = ( |
|---|
| | | this.container ? this.container : document |
|---|
| | | ).querySelectorAll(".page-box"); |
|---|
| | | //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。 |
|---|
| | | sections.forEach((section) => { |
|---|
| | | if (this.config.activeBook && this.config.activeBook.tryPageCount) { |
|---|
| | | const page = section.getAttribute("page"); |
|---|
| | | if (Number(page) > this.config.activeBook.tryPageCount) { |
|---|
| | | let chapterDom = this.getParentWithClass(section, "chapter"); |
|---|
| | | const chapterNum = chapterDom.getAttribute("num"); |
|---|
| | | this.catalogLength = Number(chapterNum) - 1; |
|---|
| | | section.remove(); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。 |
|---|
| | | const isObserver = section.getAttribute("observer"); |
|---|
| | | const isLoadObserver = section.getAttribute("loadObserver"); |
|---|
| | | if (!isObserver) { |
|---|
| | | this.observer.observe(section); |
|---|
| | | section.setAttribute("observer", "1"); |
|---|
| | | } |
|---|
| | | if (!isLoadObserver) { |
|---|
| | | this.loadPageObserver.observe(section); |
|---|
| | | section.setAttribute("loadObserver", "1"); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | initThemeColor() { |
|---|
| | | // 获取各种需要主题色的节点 |
|---|
| | | const colorDom = ( |
|---|
| | | this.container ? this.container : document |
|---|
| | | ).querySelectorAll(".theme-color"); |
|---|
| | | const backgroundColorDom = ( |
|---|
| | | this.container ? this.container : document |
|---|
| | | ).querySelectorAll(".theme-back"); |
|---|
| | | const borderColorDom = ( |
|---|
| | | this.container ? this.container : document |
|---|
| | | ).querySelectorAll(".theme-border"); |
|---|
| | | // 获取配置的主题色 |
|---|
| | | const bookThemeColor = |
|---|
| | | this.config.activeBook && this.config.activeBook.bookThemeColor |
|---|
| | | ? this.config.activeBook.bookThemeColor |
|---|
| | | : null; |
|---|
| | | const chapterThemeColor = |
|---|
| | | this.config.activeBook && this.config.activeBook.chapterThemeColor |
|---|
| | | ? this.config.activeBook.chapterThemeColor |
|---|
| | | : null; |
|---|
| | | const pageThemeColor = |
|---|
| | | this.config.activeBook && this.config.activeBook.pageThemeColor |
|---|
| | | ? this.config.activeBook.pageThemeColor |
|---|
| | | : null; |
|---|
| | | colorDom.forEach((domItem) => { |
|---|
| | | // 获取章节、页码 |
|---|
| | | let pageDom = this.getParentWithClass(domItem, "page-box"); |
|---|
| | | let chapterDom = this.getParentWithClass(domItem, "chapter"); |
|---|
| | | let page, chapterNum; |
|---|
| | | if (pageDom) page = pageDom.getAttribute("page"); |
|---|
| | | if (chapterDom) chapterNum = chapterDom.getAttribute("num"); |
|---|
| | | // 向上匹配主题色 |
|---|
| | | const themeColor = |
|---|
| | | page && pageThemeColor && pageThemeColor[page] |
|---|
| | | ? pageThemeColor[page] |
|---|
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
|---|
| | | ? chapterThemeColor[chapterNum] |
|---|
| | | : bookThemeColor; |
|---|
| | | if (themeColor) { |
|---|
| | | domItem.style.color = themeColor; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | backgroundColorDom.forEach((domItem) => { |
|---|
| | | // 获取章节、页码 |
|---|
| | | let pageDom = this.getParentWithClass(domItem, "page-box"); |
|---|
| | | let chapterDom = this.getParentWithClass(domItem, "chapter"); |
|---|
| | | let page, chapterNum; |
|---|
| | | if (pageDom) page = pageDom.getAttribute("page"); |
|---|
| | | if (chapterDom) chapterNum = chapterDom.getAttribute("num"); |
|---|
| | | // 向上匹配主题色 |
|---|
| | | const themeColor = |
|---|
| | | page && pageThemeColor && pageThemeColor[page] |
|---|
| | | ? pageThemeColor[page] |
|---|
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
|---|
| | | ? chapterThemeColor[chapterNum] |
|---|
| | | : bookThemeColor; |
|---|
| | | if (themeColor) { |
|---|
| | | domItem.style.backgroundColor = themeColor; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | borderColorDom.forEach((domItem) => { |
|---|
| | | // 获取章节、页码 |
|---|
| | | let pageDom = this.getParentWithClass(domItem, "page-box"); |
|---|
| | | let chapterDom = this.getParentWithClass(domItem, "chapter"); |
|---|
| | | let page, chapterNum; |
|---|
| | | if (pageDom) page = pageDom.getAttribute("page"); |
|---|
| | | if (chapterDom) chapterNum = chapterDom.getAttribute("num"); |
|---|
| | | // 向上匹配主题色 |
|---|
| | | const themeColor = |
|---|
| | | page && pageThemeColor && pageThemeColor[page] |
|---|
| | | ? pageThemeColor[page] |
|---|
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
|---|
| | | ? chapterThemeColor[chapterNum] |
|---|
| | | : bookThemeColor; |
|---|
| | | if (themeColor) { |
|---|
| | | domItem.style.borderColor = themeColor; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getParentWithClass(element, className) { |
|---|
| | | while (element.parentElement) { |
|---|
| | | element = element.parentElement; |
|---|
| | | if (element.classList.contains(className)) { |
|---|
| | | return element; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | pageChangeCallback(entries, observer) { |
|---|
| | | //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。 |
|---|
| | |
|---|
| | | "chapter" |
|---|
| | | ); |
|---|
| | | const catalog = catalogDom.getAttribute("num"); |
|---|
| | | console.log("page", page, catalog); |
|---|
| | | console.log(page, "page", catalog, "catalog"); |
|---|
| | | let text = null; |
|---|
| | | if (target.querySelector("p")) { |
|---|
| | | console.log(target.querySelector("p").textContent.substring(0, 20)); |
|---|
| | | text = target.querySelector("p").textContent.substring(0, 20); |
|---|
| | | } |
|---|
| | | // 返回页码和章节信息 |
|---|
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) |
|---|
| | | this.$store.state.qiankun.pageChange({ |
|---|
| | | page: page, |
|---|
| | | catalog: catalog, |
|---|
| | | text |
|---|
| | | }); |
|---|
| | | // const sections = Array.from(document.querySelectorAll(".section")); |
|---|
| | | //sections：获取所有具有 .section 类名的元素，并转换为数组。 |
|---|
| | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | loadPageCallback(entries, observer) { |
|---|
| | | 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]) { |
|---|
| | | // if (testData[catalog][page]) { |
|---|
| | | // if (Array.isArray(testData[catalog][page])) { |
|---|
| | | // this.questionData[page] = await getQuestionList( |
|---|
| | | // page, |
|---|
| | | // testData[catalog][page], |
|---|
| | | // this.config.activeBook |
|---|
| | | // ); |
|---|
| | | // } else { |
|---|
| | | // const obj = {}; |
|---|
| | | // for (let key in testData[catalog][page]) { |
|---|
| | | // obj[key] = await getQuestionList( |
|---|
| | | // [], |
|---|
| | | // testData[catalog][page][key], |
|---|
| | | // this.config.activeBook |
|---|
| | | // ); |
|---|
| | | // } |
|---|
| | | // this.questionData[page] = obj; |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | this.loadPageList.push(Number(page)); |
|---|
| | | if (this.loadPageList.length > 5) { |
|---|
| | | // 超过5页 |
|---|
| | | this.loadPageList.shift(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | initSwiper() { |
|---|
| | | const doms = ( |
|---|
| | | this.container ? this.container : document |
|---|
| | | ).querySelectorAll(".swiper-container"); |
|---|
| | | for (let i = 0; i < doms.length; i++) { |
|---|
| | | const dom = doms[i]; |
|---|
| | | new Swiper(dom, { |
|---|
| | | loop: false, // 无缝 |
|---|
| | | autoplay: { |
|---|
| | | //自动开始 |
|---|
| | | delay: 3000, //时间间隔 |
|---|
| | | disableOnInteraction: false //*手动操作轮播图后不会暂停* |
|---|
| | | }, |
|---|
| | | paginationClickable: true, |
|---|
| | | slidesPerView: 1, // 一组三个 |
|---|
| | | spaceBetween: 30, // 间隔 |
|---|
| | | // 如果需要前进后退按钮 |
|---|
| | | navigation: { |
|---|
| | | nextEl: ".swiper-button-next", |
|---|
| | | prevEl: ".swiper-button-prev" |
|---|
| | | }, |
|---|
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
|---|
| | | observer: true, |
|---|
| | | observeParents: true, |
|---|
| | | // 如果需要分页器 |
|---|
| | | pagination: { |
|---|
| | | el: ".swiper-pagination", |
|---|
| | | clickable: true // 分页器可以点击 |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | initViewer() { |
|---|
| | | const doms = ( |
|---|
| | | this.container ? this.container : document |
|---|
| | | ).querySelectorAll(".openImgBox"); |
|---|
| | | for (let i = 0; i < doms.length; i++) { |
|---|
| | | const dom = doms[i]; |
|---|
| | | new Viewer(dom, { |
|---|
| | | navbar: true, // 显示导航栏 |
|---|
| | | toolbar: true, // 显示工具栏 |
|---|
| | | title: true // 显示标题 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
