| | |
| | | v-if="showCatalogList.indexOf(1) > -1" |
| | | :showPageList="loadPageList" |
| | | ></pageHeader> |
| | | <!-- <button @click="setZoom1">测试放大</button> --> |
| | | <!-- <button @click="setZoom2">测试缩小</button> --> |
| | | <chapterOne |
| | | v-if="showCatalogList.indexOf(2) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterOne> |
| | | <chapterTwo |
| | | v-if="showCatalogList.indexOf(3) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterTwo> |
| | | <chapterThree |
| | | v-if="showCatalogList.indexOf(4) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterThree> |
| | | <chapterFour |
| | | v-if="showCatalogList.indexOf(5) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterFour> |
| | | <chapterFive |
| | | v-if="showCatalogList.indexOf(6) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterFive> |
| | | <chapterSix |
| | | v-if="showCatalogList.indexOf(7) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterSix> |
| | | <chapterSeven |
| | | v-if="showCatalogList.indexOf(8) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterSeven> |
| | | <chapterEight |
| | | v-if="showCatalogList.indexOf(9) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterEight> |
| | | <chapterNine |
| | | v-if="showCatalogList.indexOf(10) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterNine> |
| | | <chapterTen |
| | | v-if="showCatalogList.indexOf(11) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionDataMap" |
| | | :isSearch="isSearch" |
| | | ></chapterTen> |
| | | <chapterEleven |
| | | v-if="showCatalogList.indexOf(12) > -1" |
| | |
| | | loadPageList: [], |
| | | questionDataMap: {}, |
| | | renderSignMap: {}, |
| | | highlightData: null |
| | | highlightData: null, |
| | | isSearch:false |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | this.initViewer(); |
| | | }, 200); |
| | | } |
| | | }, |
| | | pageZoom: { |
| | | handler(newVal, oldVal) { |
| | | const scrollBox = ( |
| | | this.container ? this.container : document |
| | | ).querySelector(".page-main"); |
| | | scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | // 删除笔记、高亮、划线 |
| | | delSign: (data) => { |
| | | this.delSign(data); |
| | | }, |
| | | // 全文检索 |
| | | searchBookByKeyword: (keyword) => { |
| | | return this.searchTextByPage(keyword); |
| | | }, |
| | | // 跳转检索结果位置 |
| | | jumpSearchItem: (data) => { |
| | | this.searchItemLocation(data); |
| | | } |
| | | }); |
| | | } |
| | |
| | | // .querySelector("#app") |
| | | // .querySelectorAll(".page-box"); |
| | | // 检索 |
| | | // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); |
| | | // console.log(this.searchTextByPage("儿童"), "searchTextByPage"); |
| | | // 检索跳转 |
| | | // this.searchItemLocation({ |
| | | // catalog: 2, |
| | |
| | | // }, 5000); |
| | | }, |
| | | methods: { |
| | | // setZoom1() { |
| | | // let scale = this.$store.state.qiankun.scale + 10; |
| | | // const scrollBox = ( |
| | | // this.container ? this.container : document |
| | | // ).querySelector(".page-main"); |
| | | // this.$store.commit("setZoom", scale); |
| | | // }, |
| | | // setZoom2() { |
| | | // let scale = this.$store.state.qiankun.scale - 10; |
| | | // const scrollBox = ( |
| | | // this.container ? this.container : document |
| | | // ).querySelector(".page-main"); |
| | | // this.$store.commit("setZoom", scale); |
| | | // }, |
| | | // 滚动监听 |
| | | scrollFun(event) { |
| | | // 判断向上滚动还是向下滚动 |
| | |
| | | |
| | | // 渲染标记 |
| | | renderSign(type, data) { |
| | | // 父层设置禁止渲染标记时不再进行渲染 |
| | | if (this.$store.state.qiankun.disableSign) { |
| | | return false; |
| | | } |
| | | const existence = ( |
| | | this.container ? this.container : document |
| | | ).querySelector(`[dataid="${data.id}"]`); |
| | |
| | | this.container ? this.container : document |
| | | ).querySelector(`[page="${data.page}"]`); |
| | | // 创建 createTreeWalker 迭代器,用于遍历文本节点,保存到一个数组 |
| | | const treeWalker = ( |
| | | this.container ? this.container : document |
| | | ).createTreeWalker(pageDom, NodeFilter.SHOW_TEXT); |
| | | const treeWalker = document.createTreeWalker( |
| | | pageDom, |
| | | NodeFilter.SHOW_TEXT |
| | | ); |
| | | const allTextNodes = []; |
| | | let currentNode = treeWalker.nextNode(); |
| | | while (currentNode) { |
| | |
| | | if (testData && testData[catalog]) { |
| | | if (testData[catalog][page]) { |
| | | if (Array.isArray(testData[catalog][page])) { |
| | | this.questionDataMap[page] = await getQuestionList( |
| | | page, |
| | | testData[catalog][page], |
| | | this.config.activeBook |
| | | ); |
| | | this.questionDataMap[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 |
| | | ); |
| | | obj[key] = await getQuestionList( |
| | | [], |
| | | testData[catalog][page][key], |
| | | this.config.activeBook |
| | | ); |
| | | } |
| | | this.questionDataMap[page] = obj; |
| | | } |
| | | console.log("题目", this.questionDataMap); |
| | | } |
| | | } |
| | | } |
| | |
| | | // 高亮行 |
| | | setTimeout(() => { |
| | | // 获取页面所有text节点 |
| | | const pageTextList = ( |
| | | this.container ? this.container : document |
| | | ).createTreeWalker(target, NodeFilter.SHOW_TEXT); |
| | | const pageTextList = document.createTreeWalker( |
| | | target, |
| | | NodeFilter.SHOW_TEXT |
| | | ); |
| | | // 匹配关键字 |
| | | const allPageTextNodes = []; |
| | | let currentNode = pageTextList.nextNode(); |
| | |
| | | } |
| | | for (let i = 0; i < allPageTextNodes.length; i++) { |
| | | const textDom = allPageTextNodes[i]; |
| | | let txtIndex = textDom.textContent.indexOf(this.highlightData.txt); |
| | | let txtIndex = textDom.textContent.indexOf( |
| | | this.highlightData.txt |
| | | ); |
| | | if (txtIndex > -1) { |
| | | textDom.parentNode.style.transition = |
| | | "background-color 0.8s"; |
| | |
| | | for (let i = 0; i < pptDoms.length; i++) { |
| | | const dom = pptDoms[i]; |
| | | new Swiper(dom, { |
| | | loop: false, // 无缝 |
| | | autoplay: false, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: (this.container ? this.container : document).querySelector( |
| | | ".swiper-button-next" |
| | | ), |
| | | prevEl: (this.container ? this.container : document).querySelector( |
| | | ".swiper-button-prev" |
| | | ), |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | on: { |
| | | init:(value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector('.pageBox'); |
| | | if(paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + '/' + totalPages; |
| | | loop: false, // 无缝 |
| | | autoplay: false, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: (this.container ? this.container : document).querySelector( |
| | | ".swiper-button-next" |
| | | ), |
| | | prevEl: (this.container ? this.container : document).querySelector( |
| | | ".swiper-button-prev" |
| | | ) |
| | | }, |
| | | slideChange:(value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector('.pageBox'); |
| | | if(paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + '/' + totalPages; |
| | | }, |
| | | }, |
| | | }); |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | on: { |
| | | init: (value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector(".pageBox"); |
| | | if (paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + "/" + totalPages; |
| | | }, |
| | | slideChange: (value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector(".pageBox"); |
| | | if (paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + "/" + totalPages; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | initViewer() { |
| | |
| | | .querySelector(`[page="${pageNum}"]`); |
| | | if (thisPageDom) { |
| | | // 获取页面所有text节点 |
| | | const pageTextList = ( |
| | | this.container ? this.container : document |
| | | ).createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT); |
| | | const pageTextList = document.createTreeWalker( |
| | | thisPageDom, |
| | | NodeFilter.SHOW_TEXT |
| | | ); |
| | | // 匹配关键字 |
| | | const allPageTextNodes = []; |
| | | let currentNode = pageTextList.nextNode(); |