From 0787340ac90df571d7be9a405d42d33e53fb251f Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 29 五月 2024 16:52:02 +0800 Subject: [PATCH] 测试 --- src/books/childHealth/view/content/index.vue | 105 ++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 80 insertions(+), 25 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 788ebc1..3c07077 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -98,6 +98,10 @@ import _ from "lodash"; import getQuestionList from "@/assets/methods/examination"; import testData from "../../assets/examinationList"; +import Swiper from "swiper/bundle"; +import "swiper/swiper-bundle.css"; +import Viewer from "viewerjs"; +import "viewerjs/dist/viewer.css"; export default { data() { return { @@ -138,8 +142,17 @@ this.initObservation(); this.initThemeColor(); }, 500); - }, + } }, + loadPageList: { + handler(newVal, oldVal) { + console.log(newVal, "this.loadPageList"); + setTimeout(() => { + this.initSwiper(); + this.initViewer(); + }, 200); + } + } }, mounted() { // 榛樿鍔犺浇绔犺妭 @@ -190,22 +203,22 @@ // 娴嬭瘯椤甸潰璺宠浆 // 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, 15); + // setTimeout(() => { + // this.renderSign("Note", { + // id: "2ACA9359", + // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�", + // page: "100", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 1000); + // }, 1000); }, methods: { // 婊氬姩鐩戝惉 @@ -362,7 +375,7 @@ return false; } } - //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� + // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { @@ -475,18 +488,16 @@ "chapter" ); const catalog = catalogDom.getAttribute("num"); - 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) + 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, + text }); // const sections = Array.from(document.querySelectorAll(".section")); //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� @@ -501,7 +512,6 @@ const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(page) == -1) { - // const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" @@ -539,6 +549,51 @@ } }); }, + 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 // 鏄剧ず鏍囬 + }); + } + } }, components: { pageHeader, -- Gitblit v1.9.1