| | |
| | | :showPageList="loadPageList" |
| | | ></chapterOne> |
| | | </div> |
| | | <miniAudio :path="audioPath"></miniAudio> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import pageHeader from "./header.vue"; |
| | | import chapterOne from "./chapter001.vue"; |
| | | import miniAudio from "@/components/miniAudio/index.vue"; |
| | | import NoteIcon from "@/assets/images/biji.png"; |
| | | import _ from "lodash"; |
| | | import Swiper from "swiper/bundle"; |
| | |
| | | import Viewer from "viewerjs"; |
| | | import "viewerjs/dist/viewer.css"; |
| | | export default { |
| | | name: "page-main", |
| | | data() { |
| | | return { |
| | | catalogLength: 13, // 总章节数 |
| | | catalogLength: 2, // 总章节数 |
| | | showCatalogList: [], // 显示的章节 |
| | | loadThreshold: 300, // 触发加载阈值 |
| | | throttleThreshold: 100, // 节流阈值 |
| | |
| | | loadPageList: [], |
| | | questionData: {}, |
| | | renderSignMap: {}, |
| | | audioPath:'' |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | setTimeout(() => { |
| | | this.initSwiper(); |
| | | this.initViewer(); |
| | | this.getAduio(); |
| | | }, 200); |
| | | }, |
| | | }, |
| | |
| | | // } |
| | | }); |
| | | } |
| | | const pptDoms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper_ppt"); |
| | | 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; |
| | | }, |
| | | 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() { |
| | | const doms = ( |
| | |
| | | console.log("生僻字", event, word); |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { |
| | | this.$store.state.qiankun.chooseWords({ |
| | | type:"word", |
| | | type: "word", |
| | | word, |
| | | x: event.pageX, |
| | | y: event.pageY, |
| | |
| | | } |
| | | // chooseWords |
| | | }, |
| | | // 获取auido实例 |
| | | getAduio() { |
| | | let allVideo = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".audio"); |
| | | allVideo = Array.from(allVideo) |
| | | if (allVideo.length) { |
| | | const playAudio = allVideo.reverse().find((item) => item.paused == false); |
| | | if (playAudio) { |
| | | console.log("第个音频在播放", playAudio.src); |
| | | this.audioPath = playAudio.src |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | components: { |
| | | pageHeader, |
| | | chapterOne, |
| | | miniAudio, |
| | | }, |
| | | }; |
| | | </script> |