| | |
| | | </template> |
| | | |
| | | <script> |
| | | import Vue from "vue"; |
| | | import front001 from "./front001"; |
| | | import ChapterOne from "./chapter001"; |
| | | import ChapterTwo from "./chapter002"; |
| | |
| | | return this.$store.state.qiankun.scale / 100; |
| | | }, |
| | | }, |
| | | provide() { |
| | | return { |
| | | changeQuestionData: this.changeQuestionData, |
| | | }; |
| | | }, |
| | | watch: { |
| | | showCatalogList: { |
| | | handler(newVal, oldVal) { |
| | |
| | | }, |
| | | }, |
| | | loadPageList: { |
| | | handler() { |
| | | handler(newVal, oldVal) { |
| | | setTimeout(() => { |
| | | this.initSwiper(); |
| | | this.initViewer(); |
| | | }, 200); |
| | | }, |
| | | }, |
| | | pageZoom: { |
| | | handler(newVal, oldVal) { |
| | | const scrollBox = ( |
| | | this.container ? this.container : document |
| | | ).querySelector(".page-main"); |
| | | scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; |
| | | }, |
| | | }, |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | | this.showCatalogList = [2]; |
| | | this.showCatalogList = [1]; |
| | | // 滚动监听节流 |
| | | this.throttledScrollHandler = _.throttle( |
| | | this.scrollFun, |
| | |
| | | |
| | | // 测试页面跳转 |
| | | // setTimeout(() => { |
| | | // this.gotoPage(1, 15); |
| | | // this.gotoPage(1,10); |
| | | // setTimeout(() => { |
| | | // this.renderSign("Note", { |
| | | // this.renderSign("Highlight", { |
| | | // id: "2ACA9359", |
| | | // txt: "营养素和热量,才能", |
| | | // page: "100", |
| | | // txt: "题一学习主题一 运动", |
| | | // page: "10", |
| | | // type: "Highlight", |
| | | // color: "#F5E12A" |
| | | // }); |
| | | // setTimeout(() => { |
| | | // this.delSign({ |
| | | // ids: ["2ACA9359"] |
| | | // }); |
| | | // }, 2000); |
| | | // }, 1000); |
| | | // }, 1000); |
| | | // setTimeout(() => { |
| | | // this.delSign({ |
| | | // ids: ["2ACA9359"] |
| | | // }); |
| | | // }, 2000); |
| | | // }, 5000); |
| | | |
| | | // const pageDom = (this.container ? this.container : document) |
| | | // .querySelector("#app") |
| | | // .querySelectorAll(".page-box"); |
| | | // 检索 |
| | | // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); |
| | | // 检索跳转 |
| | | // this.searchItemLocation({ |
| | | // catalog: 2, |
| | | // page: 10, |
| | | // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼(见图1-1)。骨骼是人体的支架,具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下,肌肉收缩牵动所附着的骨绕着关节转动,使身体产生各种动作。所以,运动系统具有运动、支持和保护等功能,幼年时期的骨骼还具有造血功能。 ", |
| | | // txtIndex: 57 |
| | | // }); |
| | | // }, 500); |
| | | }, |
| | | methods: { |
| | | changeDomViewer() { |
| | | setTimeout(() => { |
| | | this.initViewer(); |
| | | }, 500); |
| | | swdtChange(data) { |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { |
| | | this.$store.state.qiankun.chooseWords({ |
| | | type: data.type, |
| | | data: data.data, |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | changeDomViewer() { |
| | | this.initViewer(); |
| | | }, |
| | | // 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) { |
| | | // 判断向上滚动还是向下滚动 |
| | |
| | | } |
| | | } |
| | | }, |
| | | |
| | | // 删除标记渲染 |
| | | delSign({ ids, type }) { |
| | | if (ids && ids.length) { |
| | |
| | | } |
| | | } |
| | | }, |
| | | |
| | | initObservation() { |
| | | const sections = ( |
| | | this.container ? this.container : document |
| | |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | initThemeColor() { |
| | | // 获取各种需要主题色的节点 |
| | | const colorDom = ( |
| | |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | getParentWithClass(element, className) { |
| | | console.log(element, className, "element, className"); |
| | | while (element.parentElement) { |
| | | element = element.parentElement; |
| | | if (element.classList.contains(className)) { |
| | | return element; |
| | | } |
| | | } |
| | | }, |
| | | pageChangeCallback(entries, observer) { |
| | | //entries:代表观察到的目标元素的集合。 observer:代表观察者对象。 |
| | | entries.forEach((entry) => { |
| | |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | loadPageCallback(entries, observer) { |
| | | entries.forEach(async (entry) => { |
| | | if (entry.isIntersecting) { |
| | |
| | | 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); |
| | | |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 渲染这一页的标记 |
| | | for (const key in this.renderSignMap) { |
| | | if (this.renderSignMap[key][page]) { |
| | |
| | | // 高亮行 |
| | | setTimeout(() => { |
| | | // 获取页面所有text节点 |
| | | const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT); |
| | | const pageTextList = document.createTreeWalker( |
| | | target, |
| | | NodeFilter.SHOW_TEXT |
| | | ); |
| | | // 匹配关键字 |
| | | const allPageTextNodes = []; |
| | | let currentNode = pageTextList.nextNode(); |
| | |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | initSwiper() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | |
| | | autoplay: { |
| | | //自动开始 |
| | | delay: 3000, //时间间隔 |
| | | disableOnInteraction: false, //*手动操作轮播图后不会暂停* |
| | | disableOnInteraction: false //*手动操作轮播图后不会暂停* |
| | | }, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: (this.container ? this.container : document).querySelector( |
| | | nextEl: dom.querySelector( |
| | | ".swiper-button-next" |
| | | ), |
| | | prevEl: (this.container ? this.container : document).querySelector( |
| | | prevEl: dom.querySelector( |
| | | ".swiper-button-prev" |
| | | ), |
| | | ) |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | observeParents: true |
| | | // // 如果需要分页器 |
| | | // pagination: { |
| | | // el: (this.container ? this.container : document).querySelector( |
| | |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: (this.container ? this.container : document).querySelector( |
| | | nextEl: dom.querySelector( |
| | | ".swiper-button-next" |
| | | ), |
| | | prevEl: (this.container ? this.container : document).querySelector( |
| | | prevEl: dom.querySelector( |
| | | ".swiper-button-prev" |
| | | ), |
| | | ) |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | |
| | | var paginationInfoEl = dom.querySelector(".pageBox"); |
| | | if (paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + "/" + totalPages; |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | initViewer() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | swdtChange(data) { |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { |
| | | this.$store.state.qiankun.chooseWords({ |
| | | type: data.type, |
| | | data: data.data, |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | // 根据关键字全文检索 |
| | | searchTextByPage(keyword) { |
| | | const searchResult = []; |
| | |
| | | propsData: { |
| | | showPageList: [], |
| | | questionData: {}, |
| | | isSearch: true |
| | | isSearch: true, |
| | | }, |
| | | }); |
| | | pageExample.$mount( |
| | |
| | | .querySelector("#searchDomBox") |
| | | .querySelectorAll(".page-box"); |
| | | const pages = []; |
| | | |
| | | for (let i = 0; i < pageDom.length; i++) { |
| | | const pageDomItem = pageDom[i]; |
| | | pages.push(Number(pageDomItem.getAttribute("page"))); |
| | |
| | | propsData: { |
| | | showPageList: [pageNum], |
| | | questionData: {}, |
| | | isSearch: true |
| | | isSearch: true, |
| | | }, |
| | | }); |
| | | pageExample.$mount( |
| | |
| | | } |
| | | } |
| | | // 输出搜索结果 |
| | | // console.log(searchResult); |
| | | console.log(searchResult); |
| | | return searchResult; |
| | | }, |
| | | |
| | | // 根据检索结果跳转对应位置并高亮 |
| | | searchItemLocation(data) { |
| | | // 记录高亮信息 |