图片预览修改

dangan-ui/src/views/dangan/catalog/index.vue

@@ -223,11 +223,26 @@
       <div style="text-align: right; padding-right: 20px; font-size: 18px">共计： {{ lssc.total }}</div>
       <div>
         <el-image
-          v-for="item in lssc.list"
+          v-for="(item,index) in lssc.list"
           style="width: 100px; height: 100px;margin: 10px"
+          :src="item.picUrl" @click="onTu(index)">
+        </el-image>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="图片预览" :visible.sync="dtyl.open" fullscreen append-to-body>
+      <div style="text-align: right; padding-right: 50px; font-size: 18px">{{ (dtyl.index + 1) + '/' + lssc.list.length }}</div>
+      <div>
+        <el-carousel ref="carousel" indicator-position="none" arrow="always" :autoplay="false" :loop="false" height="85vh" :initial-index="dtyl.index" @change="carouselChange">
+          <el-carousel-item v-for="item in lssc.list" :key="item.id">
+            <el-image
+              style="height: 85vh;margin: 0 auto"
               :src="item.picUrl"
-          :preview-src-list="lssc.previewList">
+              :preview-src-list="[item.picUrl]"
+            >
             </el-image>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </el-dialog>
 
@@ -307,6 +322,11 @@ export default {
         list: [],
         previewList: [],
         total: 0
+      },
+      // 图片预览
+      dtyl:{
+        open: false,
+        index: 0
       }
     };
   },
@@ -533,6 +553,17 @@ export default {
         })
       });
     },
+    // 点击档案图片
+    onTu(index){
+      this.dtyl.open = true;
+      console.log('onTu',index);
+      this.dtyl.index = index
+      this.$refs.carousel.setActiveItem(this.dtyl.index);
+    },
+    carouselChange(i){
+      console.log('carouselChange',i);
+      this.dtyl.index = i
+    }
   }
 };
 </script>
@@ -579,4 +610,9 @@ export default {
       border-radius:10px
     }
   }
+
+
+  .el-carousel__item{
+    text-align: center;
+  }
 </style>