update

package.json

@@ -28,6 +28,7 @@
     "management-system"
   ],
   "dependencies": {
+    "@fancyapps/ui": "^4.0.31",
     "axios": "0.18.1",
     "babel-polyfill": "^6.26.0",
     "clipboard": "2.0.4",

src/views/product-repo/index.vue

@@ -20,12 +20,9 @@
         <el-table-column label="商品ID" min-width="100" align="center" prop="productId" />
         <el-table-column label="商品图片" min-width="100" align="center">
           <template slot-scope="scope">
-            <el-image 
-              v-if="scope.row.mainPicture && scope.row.mainPicture.length"
-              style="width: 100px; height: 100px"
-              :src="scope.row.mainPicture[0]" 
-              :preview-src-list="scope.row.mainPicture.slice(0, 5)">
-            </el-image>
+            <p style="margin: 0;cursor: pointer;" v-if="scope.row.mainPicture && scope.row.mainPicture.length" @click="openGallery(scope.row)">
+              <img style="max-width: 100px;"  :src="scope.row.mainPicture[0]"  alt="">
+            </p>
           </template>
         </el-table-column>
         <el-table-column label="商品名称" min-width="100" align="center" prop="productTitle" />
@@ -45,6 +42,8 @@ import { auditStatus } from "@/constants/index";
 import { getValueByKey } from "@/utils/index";
 import { galleryProduct, pullGalleryProduct } from "@/api/productRepo";
 import permission from "@/directive/permission";
+import { Fancybox } from "@fancyapps/ui";
+import "@fancyapps/ui/dist/fancybox.css";
 
 
 export default {
@@ -119,6 +118,18 @@ export default {
       }).finally(() => {
         this.productsSyncLoading = false;
       })
+    },
+    openGallery(row) {
+      const images = row.mainPicture.slice(0, 5)
+      Fancybox.show(
+        images.map((src) => ({
+          src,
+          type: "image",
+        })),
+        {
+          startIndex: 0,
+        }
+      );
     }
   }
 };