From d29b8917dc2fd0a0f751480cbbf6ed8dba36d436 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 31 五月 2024 15:56:15 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/lifeCare/index.vue | 738 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 699 insertions(+), 39 deletions(-) diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue index b988d65..a236819 100644 --- a/src/books/lifeCare/index.vue +++ b/src/books/lifeCare/index.vue @@ -1,39 +1,106 @@ <template> - <div class="public-books"> - <front001 /> - <front002 /> - <front003 /> - <front004 /> - <front005 /> - <front006 /> - <ChapterOne /> - <ChapterTwo /> - <ChapterThree /> - <ChapterFour /> - <ChapterFive /> - <!-- <chapterSix /> --> - <!-- <chapterSeven /> --> - <!-- <chapterEight /> --> - <!-- <chapterNine /> --> - <!-- <chapter010 /> --> - <!-- <chapter011 /> --> - <!-- <chapter012 /> --> - <!-- <chapter013 /> --> - <!-- <chapter014 /> --> - <!-- <chapter015 /> --> - <!-- <chapter016 /> --> - <!-- <chapter017 /> --> - <!-- <topic008 /> --> + <div class="page-main" @scroll="throttledScrollHandler"> + <div + class="public-lifeCare" + @mouseup="handleMouseUp" + :style="{ + fontSize: fontSize ? fontSize + 'px' : '16px', + transform: `scale(${pageZoom ? pageZoom : 1})`, + transformOrigin: 'center top', + }" + > + <front001 + v-if="showCatalogList.indexOf(1) > -1" + :showPageList="loadPageList" + /> + <ChapterOne + v-if="showCatalogList.indexOf(2) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterTwo + v-if="showCatalogList.indexOf(3) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterThree + v-if="showCatalogList.indexOf(4) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterFour + v-if="showCatalogList.indexOf(5) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterFive + v-if="showCatalogList.indexOf(6) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapterSix + v-if="showCatalogList.indexOf(7) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapterSeven + v-if="showCatalogList.indexOf(8) > -1" + :showPageList="loadPageList" + :questionData="questionData" + @eventSwdt="swdtChange" + /> + <chapterEight + v-if="showCatalogList.indexOf(9) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapterNine + v-if="showCatalogList.indexOf(10) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapter010 + v-if="showCatalogList.indexOf(11) > -1" + :showPageList="loadPageList" + /> + <chapter011 + v-if="showCatalogList.indexOf(12) > -1" + :showPageList="loadPageList" + /> + <chapter012 + v-if="showCatalogList.indexOf(13) > -1" + :showPageList="loadPageList" + /> + <chapter013 + v-if="showCatalogList.indexOf(14) > -1" + :showPageList="loadPageList" + /> + <chapter014 + v-if="showCatalogList.indexOf(15) > -1" + :showPageList="loadPageList" + /> + <chapter015 + v-if="showCatalogList.indexOf(16) > -1" + :showPageList="loadPageList" + /> + <chapter016 + v-if="showCatalogList.indexOf(17) > -1" + :showPageList="loadPageList" + /> + <chapter017 + v-if="showCatalogList.indexOf(18) > -1" + :showPageList="loadPageList" + /> + <chapter018 + v-if="showCatalogList.indexOf(19) > -1" + :showPageList="loadPageList" + /> + </div> </div> </template> <script> import front001 from "./view/front001"; -import front002 from "./view/front002"; -import front003 from "./view/front003"; -import front004 from "./view/front004"; -import front005 from "./view/front005"; -import front006 from "./view/front006"; import ChapterOne from "./view/chapter001"; import ChapterTwo from "./view/chapter002"; import ChapterThree from "./view/chapter003"; @@ -51,16 +118,609 @@ import chapter015 from "./view/chapter015"; import chapter016 from "./view/chapter016"; import chapter017 from "./view/chapter017"; - +import chapter018 from "./view/chapter018"; +import NoteIcon from "@/assets/images/biji.png"; +import _ from "lodash"; +import getQuestionList from "@/assets/methods/examination"; +import testData from "./js/examinationList"; +import Swiper from "swiper/bundle"; +import "swiper/swiper-bundle.css"; +import Viewer from "viewerjs"; +import "viewerjs/dist/viewer.css"; export default { - name: "temp-book", + data() { + return { + catalogLength: 19, // 鎬荤珷鑺傛暟 + showCatalogList: [], // 鏄剧ず鐨勭珷鑺� + loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� + throttleThreshold: 100, // 鑺傛祦闃堝�� + previousScrollTop: 0, + throttledScrollHandler: null, + observer: null, + loadPageObserver: null, + loadPageList: [], + questionData: {}, + renderSignMap: {}, + }; + }, + computed: { + fontSize() { + return this.$store.state.qiankun.fontSize; + }, + pageZoom() { + return this.$store.state.qiankun.scale / 100; + }, + }, + provide() { + return { + changeQuestionData: this.changeQuestionData, + }; + }, + watch: { + showCatalogList: { + handler(newVal, oldVal) { + if ( + this.$store.state.qiankun && + this.$store.state.qiankun.catalogChange + ) { + // 璋冪敤鐖跺眰鏂规硶 + this.$store.state.qiankun.catalogChange({ + showCatalogList: newVal, + }); + } + // 鍚姩椤电爜瑙傚療 + setTimeout(() => { + this.initObservation(); + this.initThemeColor(); + }, 500); + }, + }, + loadPageList: { + handler() { + setTimeout(() => { + this.initSwiper(); + this.initViewer(); + }, 200); + }, + }, + }, + mounted() { + // 榛樿鍔犺浇绔犺妭 + this.showCatalogList = [6]; + // 婊氬姩鐩戝惉鑺傛祦 + this.throttledScrollHandler = _.throttle( + this.scrollFun, + this.throttleThreshold, + { leading: true, trailing: false } + ); + // 瀹氫箟瀛愬眰鏂规硶 + if (this.setGlobalState) { + // 鎻愪緵椤甸潰璺宠浆鍔熻兘 + this.setGlobalState({ + gotoPage: (catalog, page) => { + this.gotoPage(catalog, page); + }, + // 娓叉煋绗旇銆侀珮浜�佸垝绾� + renderSign: (type, data) => { + this.renderSign(type, data); + }, + // 鍒犻櫎绗旇銆侀珮浜�佸垝绾� + delSign: (data) => { + this.delSign(data); + }, + }); + } + + // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般�� + // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆� + this.observer = new IntersectionObserver(this.pageChangeCallback, { + root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� + rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� + 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(1, 15); + // setTimeout(() => { + // this.renderSign("Note", { + // id: "2ACA9359", + // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�", + // page: "100", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 1000); + // }, 1000); + }, + methods: { + // 婊氬姩鐩戝惉 + scrollFun(event) { + // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 + if (event.target.scrollTop > this.previousScrollTop) { + // 鍚戜笅 + const currentScrollTop = + event.target.scrollTop + event.target.offsetHeight; + if ( + currentScrollTop >= + event.target.scrollHeight - this.loadThreshold + ) { + // 鍒拌揪闃堝�� + if ( + this.showCatalogList[this.showCatalogList.length - 1] < + this.catalogLength + ) { + // 鍔犺浇涓嬩竴绔� + this.showCatalogList.push( + this.showCatalogList[this.showCatalogList.length - 1] + 1 + ); + if (this.showCatalogList.length > 3) { + // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔� + this.showCatalogList.shift(); + } + } + } + } else if (event.target.scrollTop < this.previousScrollTop) { + // 鍚戜笂 + const currentScrollTop = event.target.scrollTop; + if (currentScrollTop <= this.loadThreshold) { + // 鍒拌揪闃堝�� + if (this.showCatalogList[0] > 0) { + // 鍔犺浇涓婁竴绔� + this.showCatalogList.unshift(this.showCatalogList[0] - 1); + if (this.showCatalogList.length > 3) { + // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔� + this.showCatalogList.pop(); + } + } + } + } + // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢� + // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆 + this.previousScrollTop = event.target.scrollTop; + }, + // 绔犺妭銆侀〉闈㈣烦杞� + gotoPage(catalog, page) { + if (catalog >= 0 && catalog <= this.catalogLength) { + // 澶勭悊娓叉煋绔犺妭 + if (catalog == 0) { + this.showCatalogList = [0, 1]; + } else if (catalog == this.catalogLength) { + this.showCatalogList = [ + this.catalogLength - 2, + this.catalogLength - 1, + this.catalogLength, + ]; + } else { + this.showCatalogList = [catalog - 1, catalog, catalog + 1]; + } + setTimeout(() => { + // 璺宠浆椤电爜 + const pageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${page}"]`); + if (pageDom) { + pageDom.scrollIntoView(); + } else { + console.log("椤电爜閿欒锛�"); + } + }, 500); + } else { + console.log("绔犺妭閿欒锛�"); + } + }, + + // 澶勭悊鏍囪鏁版嵁 + handelSignData(type, data) { + if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; + if (!this.renderSignMap[type][data.page]) + this.renderSignMap[type][data.page] = []; + this.renderSignMap[type][data.page].push(data); + }, + + // 娓叉煋鏍囪 + renderSign(type, data) { + const existence = ( + this.container ? this.container : document + ).querySelector(`[dataid="${data.id}"]`); + // 鍘婚噸 + if (!existence) { + const pageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${data.page}"]`); + // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁� + const treeWalker = document.createTreeWalker( + pageDom, + NodeFilter.SHOW_TEXT + ); + const allTextNodes = []; + let currentNode = treeWalker.nextNode(); + while (currentNode) { + allTextNodes.push(currentNode); + currentNode = treeWalker.nextNode(); + } + for (let i = 0; i < allTextNodes.length; i++) { + const textDom = allTextNodes[i]; + if (textDom.textContent.indexOf(data.txt) > -1) { + let reg = new RegExp(`${data.txt}`, "ig"); + switch (type) { + case "Highlight": + // 楂樹寒 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<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": + // 鍒掔嚎 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<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": + // 绗旇 + textDom.parentNode.innerHTML = + textDom.parentNode.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}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` + ); + break; + } + } + } + } + }, + // 鍒犻櫎鏍囪娓叉煋 + delSign({ ids, type }) { + if (ids && ids.length) { + for (let i = 0; i < ids.length; i++) { + const id = ids[i]; + const dom = ( + this.container ? this.container : document + ).querySelector(`[dataid="${id}"]`); + dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( + dom.outerHTML, + dom.outerText + ); + } + } + if (type) { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(`[datatype="${type}"]`); + for (let i = 0; i < doms.length; i++) { + const dom = doms[i]; + dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( + dom.outerHTML, + dom.outerText + ); + } + } + }, + initObservation() { + const sections = ( + this.container ? this.container : document + ).querySelectorAll(".page-box"); + 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锛氫唬琛ㄨ瀵熻�呭璞°�� + entries.forEach((entry) => { + //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ�� + if (entry.isIntersecting) { + const target = entry.target; + //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱� + const page = target.getAttribute("page"); + const catalogDom = this.tool.getParentNodeByClassName( + target, + "chapter" + ); + const catalog = catalogDom.getAttribute("num"); + let text = null; + if (target.querySelector("p")) { + 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 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� + // let index = sections.findIndex((section) => section === target) + 1; + //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併�� + } + }); + }, + loadPageCallback(entries, observer) { + entries.forEach(async (entry) => { + if (entry.isIntersecting) { + const target = entry.target; + const page = target.getAttribute("page"); + if (this.loadPageList.indexOf(Number(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)); + // 娓叉煋杩欎竴椤电殑鏍囪 + for (const key in this.renderSignMap) { + if (this.renderSignMap[key][page]) { + this.renderSignMap[key][page].forEach((item) => { + this.renderSign(key, item); + }); + } + } + 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, // 鏄剧ず鏍囬 + }); + } + }, + // eslint-disable-next-line + getParentWithClass(element, className) { + while (element.parentElement) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } + } + }, + handleMouseUp(e) { + const selection = ( + this.container ? this.container : window + ).getSelection(); + const txt = selection.toString(); + if (selection.type != "none" && txt) { + let node = selection.anchorNode.parentNode; + let pageHtml = this.getParentWithClass( + selection.anchorNode, + "page-box" + ); + let chapterDom = this.getParentWithClass( + selection.anchorNode, + "chapter" + ); + let chapterNum; + if (chapterDom) chapterNum = chapterDom.getAttribute("num"); + if (pageHtml) { + const page = pageHtml.getAttribute("page"); + // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶 + if (this.$store.state.qiankun.windowSelection) { + this.$store.state.qiankun.windowSelection({ + chapterNum, + txt, + page, + x: e.x, + y: e.y, + }); + } + } + } else { + if (this.$store.state.qiankun.windowSelection) { + this.$store.state.qiankun.windowSelection({ + chapterNum: "", + txt: "", + page: "", + x: e.x, + y: e.y, + }); + } + } + }, + swdtChange(data) { + if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { + this.$store.state.qiankun.chooseWords({ + type: data, + }); + } + }, + }, components: { front001, - front002, - front003, - front004, - front005, - front006, ChapterOne, ChapterTwo, ChapterThree, @@ -78,11 +738,11 @@ chapter015, chapter016, chapter017, + chapter018, }, - methods: {}, }; </script> <style lang="less"> -@import './css/default.less'; +@import "./css/default.less"; </style> -- Gitblit v1.9.1