25585

packages/3.0.0/AppVillageAlbum/components/List.vue

@@ -30,7 +30,7 @@
           </div>
           <div class="list-item" v-for="(item, index) in list" :key="index">
             <div class="list-item__img">
-              <img :src="item.url">
+              <img :src="item.url" @click="prevImg(index)">
             </div>
             <div class="list-item__bottom">
               <div class="left">
@@ -58,12 +58,18 @@
           </div>
         </div>
       </div>
+      <div class="images" v-viewer="{movable: true}" v-show="false">
+        <img v-for="(item, index) in imgList" :src="item" :key="index" alt="">
+      </div>
     </template>
   </ai-list>
 </template>
 
 <script>
   import { mapState } from 'vuex'
+  import Viewer from 'v-viewer'
+  import Vue from 'vue'
+  Vue.use(Viewer)
 
   export default {
     name: 'FormList',
@@ -93,7 +99,11 @@
     },
 
     computed: {
-      ...mapState(['user'])
+      ...mapState(['user']),
+
+      imgList () {
+        return this.list.map(v => v.url)
+      }
     },
 
     created () {
@@ -114,6 +124,11 @@
         })
       },
 
+      prevImg (index) {
+        const viewer = this.$el.querySelector('.images').$viewer
+        viewer.view(index)
+      },
+
       getList () {
         this.instance.post(`/app/appvillagepicturealbum/list`, null, {
           params: {
@@ -337,6 +352,7 @@
         .list-item__img {
           width: 100%;
           height: 140px;
+          cursor: pointer;
 
           img {
             width: 100%;