optimize: gallery logic

Author: vanoneang

.env.production

@@ -1,3 +1,3 @@
 
 
-VUE_APP_BASE_URL = 'http://dev.lin.colorful3.com/'
+VUE_APP_BASE_URL = ''http://koa.lin.colorful3.com/

package.json

@@ -21,7 +21,7 @@
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
     "js-cookie": "^2.2.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.14",
     "moment": "^2.24.0",
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",

src/components/base/preview/preview.vue

@@ -54,6 +54,7 @@
 <script>
 // photoswipe接口文档 http://photoswipe.com/documentation/api.html
 
+import { Loading } from 'element-ui'
 import 'photoswipe/dist/photoswipe.css'
 import 'photoswipe/dist/default-skin/default-skin.css'
 import PhotoSwipe from 'photoswipe/dist/photoswipe'
@@ -124,6 +125,7 @@ export default {
       options = Object.assign(defaultOptions, options, {
         index: imageIndex,
       })
+      const loadingInstance = Loading.service()
       const galleryElement = this.$refs.myGallery
       this.radom = createId();
       let pswpElement = this.$refs.pswpWrap
@@ -144,6 +146,7 @@ export default {
       }
       this.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, photoSwipeOptions)
       this.gallery.init()
+      loadingInstance.close()
       // Gallery starts closing
       this.gallery.listen('close', () => {
         if (this.gallery) {
@@ -211,19 +214,23 @@ export default {
       }
       return items
     },
+    destroy() {
+      // 销毁
+      if (this.gallery) {
+        this.gallery.close();
+        this.gallery = null
+      }
+    },
   },
   beforeDestroy() {
-    // 销毁
-    if (this.gallery) {
-      this.gallery.close();
-      this.gallery = null
-    }
+    this.destroy()
   },
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .my-gallery {
   opacity: 0;
+  display: none;
 }
 </style>

src/components/layout/AppMain.vue

@@ -12,6 +12,13 @@
 <script>
 export default {
   name: 'AppMain',
+  watch: {
+    $route() {
+      if (this.$previewInstance) {
+        this.$previewInstance.destroy()
+      }
+    },
+  },
 }
 </script>
 

src/lin/plugins/preview/index.js

@@ -1,31 +1,45 @@
 import Vue from 'vue'
 import Preview from '@/components/base/preview/preview'
 
+
 const previewImage = {}
 previewImage.install = (Vue, options = {}) => { // eslint-disable-line
   const PreviewConstructor = Vue.extend(Preview)
 
+  let instance = null
+
   // eslint-disable-next-line func-names
   PreviewConstructor.prototype.close = function () {
     this.data = []
     this.options = {}
     this.imageIndex = 0
   }
 
+  const getInstance = () => {
+    if (!instance) {
+      instance = new PreviewConstructor()
+    }
+    return instance
+  }
+
   Vue.prototype.$imagePreview = (opts = {}) => { // eslint-disable-line
     const elem = document.createElement('div')
-    let instance = new PreviewConstructor()
-    instance.$mount(elem)
-    instance.data = opts.images || []
-    instance.imageIndex = opts.index || 0
-    instance.options = opts.defaultOpt || {}
-    document.body.appendChild(instance.$el)
-    instance.$on('close', () => {
-      instance.close()
-      document.body.removeChild(instance.$el)
-      instance.$destroy()
-      instance = null
-    })
+    if (!instance) {
+      let myInstance = getInstance()
+      Vue.prototype.$previewInstance = myInstance // eslint-disable-line
+      myInstance.$mount(elem)
+      myInstance.data = opts.images || []
+      myInstance.imageIndex = opts.index || 0
+      myInstance.options = opts.defaultOpt || {}
+      document.body.appendChild(myInstance.$el)
+      myInstance.$on('close', () => {
+        myInstance.close()
+        document.body.removeChild(myInstance.$el)
+        myInstance.$destroy()
+        myInstance = null
+        instance = null
+      })
+    }
   }
 }
 

src/plugins/custom/views/Gallery.vue

@@ -6,7 +6,7 @@
         <div
           class="img-box"
           @click="preview(index)"
-          v-for="(url, index) in urls"
+          v-for="(url, index) in thumbs"
           :key="index">
           <el-image
             class="thumb-item-img"
@@ -35,8 +35,13 @@ export default {
         'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery3.jpg',
         'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery4.jpg',
         'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery5.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery6.jpg',
-        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/gallery7.jpg',
+      ],
+      thumbs: [
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery1.jpg',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery2.jpg',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery3.jpg',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery4.jpg',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/gallery/thumb/gallery5.jpg',
       ],
     }
   },