up

hot/src/assets/base.css

@@ -0,0 +1,9 @@
+.viewer-title{
+  display: none !important;
+}
+.viewer-prev{
+  display: none !important;
+}
+.viewer-next{
+  display: none !important;
+}

hot/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import axios from 'axios'
 import 'viewerjs/dist/viewer.css'
+import './assets/base.css'
 import Viewer from 'v-viewer'
  // 图片懒加载
 import VueLazyLoad from 'vue-lazyload'
@@ -13,12 +14,7 @@ Vue.use(VueLazyLoad, {
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
 
-Vue.use(Viewer,{
-  defaultOptions: {
-    title:false
-  }
-})
-
+Vue.use(Viewer)
 
 new Vue({
   router,

hot/src/views/Home.vue

@@ -38,13 +38,15 @@
       >
         <swiper-slide v-for="i in data[active]" :key="i">
           <div class="slide">
-            <img
-              style="cursor: pointer"
-              v-viewer
-              v-if="active === 'images'"
-              v-lazy="imgSrc(i)"
-              alt=""
-            />
+            <viewer v-if="active === 'images'" ref="viewer" :images="lookPics">
+              <img
+                style="cursor: pointer"
+                v-lazy="imgSrc(i)"
+                alt=""
+                @click="lookImg(imgSrc(i),i-1)"
+              />
+            </viewer>
+
             <video
               v-else-if="active === 'video'"
               :src="fixUrl(i.url)"
@@ -111,7 +113,8 @@ export default {
   data() {
     return {
       myInd: 0,
-      myFlag:false,
+      myFlag: false,
+      lookPics:[],
       // 为定制化加的索引
       loadAuto: false,
       audio: "",
@@ -127,11 +130,11 @@ export default {
             },
             on: {
               slideChangeTransitionEnd: () => {
-                if(this.myFlag){
-                let swiper = this.$refs.mySwiper.$swiper;
-                let activeIndex = swiper.activeIndex;
-                this.myInd = activeIndex;
-                }else this.myInd=0
+                if (this.myFlag) {
+                  let swiper = this.$refs.mySwiper.$swiper;
+                  let activeIndex = swiper.activeIndex;
+                  this.myInd = activeIndex;
+                } else this.myInd = 0;
               },
             },
           }
@@ -145,11 +148,11 @@ export default {
             },
             on: {
               slideChangeTransitionEnd: () => {
-                if(this.myFlag){
-                let swiper = this.$refs.mySwiper.$swiper;
-                let activeIndex = swiper.activeIndex;
-                this.myInd = activeIndex;
-                }else this.myInd=0
+                if (this.myFlag) {
+                  let swiper = this.$refs.mySwiper.$swiper;
+                  let activeIndex = swiper.activeIndex;
+                  this.myInd = activeIndex;
+                } else this.myInd = 0;
               },
             },
           },
@@ -193,6 +196,11 @@ export default {
     SwiperSlide,
   },
   methods: {
+    lookImg(url,index) {
+      let dom = this.$refs.viewer[index].$viewer
+      this.lookPics=[url]
+      dom.show()
+    },
     imgSrc(val) {
       if (typeof val === "number") return `/data/${this.m}/img/${val}.png`;
       //线下调试
@@ -221,11 +229,11 @@ export default {
       let temp = result[this.m];
 
       let flag = obj.some((v) => v.id === this.m);
-      this.myFlag = flag
+      this.myFlag = flag;
       if (flag) temp = obj.find((v) => v.id === this.m);
       else {
-          temp.content=[temp.content]
-          temp.title=[temp.title]
+        temp.content = [temp.content];
+        temp.title = [temp.title];
       }
 
       this.data = temp;