更换查看大图插件

package.json

@@ -24,6 +24,7 @@
     "sass-loader": "^13.0.2",
     "svgo": "^2.8.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vue-slidepage": "^1.0.0",

src/components/SlideImage/index.vue

@@ -14,7 +14,7 @@
             :key="index"
           >
             <img :src="$getFullUrl(item[imgKey])" alt="" />
-            <div class="enlarge" @click="handelPreviewImages(imgList,index)">
+            <div class="enlarge" @click="handelPreviewImages(imgList, index)">
               <img src="@/assets/imgs/enlarge-s.png" alt="" />
             </div>
           </swiper-slide>
@@ -52,8 +52,8 @@
     />
   </div>
 </template>
-   
-  <script>
+
+<script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import "swiper/dist/css/swiper.css";
 export default {
@@ -95,7 +95,7 @@ export default {
         slideToClickedSlide: true,
       },
       imgViewerVisible: false,
-      initialIndex:0
+      initialIndex: 0,
     };
   },
 
@@ -108,10 +108,15 @@ export default {
     });
   },
   methods: {
-    handelPreviewImages(items,i) {
-      this.imgViewerVisible = true;
+    handelPreviewImages(items, index) {
       this.previewList = items.map((item) => this.$getFullUrl(item.url));
-      this.initialIndex = i
+      const $viewer = this.$viewerApi({
+        images: this.previewList,
+        options: {
+          initialViewIndex: index,
+          zoomRatio: 1.4,
+        },
+      });
     },
     closeImgViewer() {
       this.imgViewerVisible = false;
@@ -119,8 +124,8 @@ export default {
   },
 };
 </script>
-   
-  <style scoped lang="scss">
+
+<style scoped lang="scss">
 .firstDiv {
   /* width: 1920px; */
   /* height: 1080px; */
@@ -181,7 +186,6 @@ export default {
   }
 }
 
-
 .gallery-top {
   height: 80%;
   width: 100%;
@@ -200,7 +204,3 @@ export default {
   opacity: 1;
 }
 </style>
-   
-   
-   
-   
\ No newline at end of file

src/main.js

@@ -16,6 +16,14 @@ import VideoPlayer from 'vue-video-player'
 import 'video.js/dist/video-js.css'
 import 'vue-video-player/src/custom-theme.css'
 
+//大图浏览，不使用elmentUI自带的imageViwer因为其不自带调整zoomRate
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+Vue.use(Viewer)
+Viewer.setDefaults({
+  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
+})
+
 Vue.use(VideoPlayer)
 
 import LImg from '@/components/LazyImg'

src/views/boutique/components/jyycc/index.vue

@@ -188,11 +188,11 @@
 </template>
 
 <script>
-import part1 from "./jyycc-nation.json";
+import MDialog from "@/components/MDialog";
 import part2 from "./jyycc-dmby.json";
+import part1 from "./jyycc-nation.json";
 import videoPlayer from "@/components/VideoPlayer";
 import ImageViewer from '@/components/ImageViewer'
-import MDialog from "@/components/MDialog";
 export default {
     components: {
         videoPlayer,

src/views/museum/Detail.vue

@@ -44,21 +44,25 @@
                   ><svg-icon icon-class="address"></svg-icon
                   >地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
                 </span>
-                <span class="value">{{ museumDetail.address ||'暂无'}}</span>
+                <span class="value">{{ museumDetail.address || "暂无" }}</span>
               </div>
               <div>
                 <span class="label"
                   ><svg-icon icon-class="time"></svg-icon>开放时间：</span
                 >
-                <span class="value">{{ museumDetail.openPeriod ||'暂无'}}</span>
+                <span class="value">{{
+                  museumDetail.openPeriod || "暂无"
+                }}</span>
               </div>
               <div>
                 <span class="label">
                   <svg-icon icon-class="ticket"></svg-icon>入园方式：</span
                 >
-                <span class="value">{{ museumDetail.entryMode ||'暂无'}}</span>
+                <span class="value">{{
+                  museumDetail.entryMode || "暂无"
+                }}</span>
               </div>
-              <div >
+              <div>
                 <span class="label">
                   <svg-icon icon-class="tel"></svg-icon>联系方式：</span
                 >
@@ -91,12 +95,6 @@
         </ul>
       </div>
     </div>
-    <el-image-viewer
-      v-if="imgViewerVisible"
-      :on-close="closeImgViewer"
-      :url-list="imgList"
-      :initial-index="imgIndex"
-    />
   </div>
 </template>
 
@@ -112,7 +110,6 @@ export default {
   data() {
     let vm = this;
     return {
-      imgViewerVisible: false,
       museumDetail: {},
       tabbars: ["简介", "相关信息"],
       curTab: "简介",
@@ -126,7 +123,6 @@ export default {
           path: "/museum",
         },
       ],
-      imgIndex: 0,
     };
   },
   watch: {
@@ -153,19 +149,30 @@ export default {
       }
     },
 
-    closeImgViewer() {
-      this.imgViewerVisible = false;
-    },
-
-    handelPreviewImages(items, i) {
-      this.imgViewerVisible = true;
-      this.imgList = items.map((item) => this.$getFullUrl(item.url));
-      this.imgIndex = i;
+    handelPreviewImages(items, index) {
+      this.imgList = items
+      const $viewer = this.$viewerApi({
+        images: this.imgList,
+        options: {
+          initialViewIndex: index,
+          zoomRatio: 1.4,
+        },
+      });
     },
 
     handleClickTab(item) {
       this.curTab = item;
     },
+
+    //禁止页面滚动
+    handleOverflowHidden() {
+      document.documentElement.style.overflowY = "hidden";
+    },
+
+    //恢复页面滚动
+    handleOverflowAuto() {
+      document.documentElement.style.overflowY = "auto";
+    },
   },
 };
 </script>