ソースを参照

v-viewer 预览点击的某张图片

reghao 2 年 前
コミット
90d472bab8
1 ファイル変更13 行追加10 行削除
  1. 13 10
      src/views/home/ImagePage.vue

+ 13 - 10
src/views/home/ImagePage.vue

@@ -41,7 +41,7 @@
     <el-row>
       <el-col :md="24" class="movie-list">
         <div>
-          <el-col v-for="image in data.imageUrls" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12">
+          <el-col v-for="(image, index) in data.imageUrls" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12">
             <el-card :body-style="{ padding: '0px' }" class="card">
               <div class="imgs">
                 <el-image
@@ -49,7 +49,7 @@
                   fit="cover"
                   class="coverImg"
                   :src="image.thumbnailUrl"
-                  @click="showImages(data.imageUrls)">
+                  @click="showImages(index)">
                 </el-image>
                 <span style="position: absolute; bottom: 0; left: 0; color:white">
                     <i v-if="true" class="el-icon-monitor" />
@@ -80,6 +80,11 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
+      viewerOptions:{
+        movable: true,
+        fullscreen: false,
+        keyboard: true
+      },
       user: null,
       data: null,
       followButton: {
@@ -115,24 +120,22 @@ export default {
     }
   },
   methods: {
-    showImages(imageUrls) {
-      const imgs = []
-      for (const i of imageUrls) {
-        imgs.push(i.originalUrl)
+    showImages(index) {
+      const imageUrls = []
+      for (const i of this.data.imageUrls) {
+        imageUrls.push(i.originalUrl)
       }
 
       this.$viewerApi({
-        images: imgs,
+        images: imageUrls,
         options: {
+          initialViewIndex: index,
           movable: true,
           fullscreen: false,
           keyboard: true
         }
       })
     },
-    showImage() {
-      this.$viewerApi()
-    },
     followUser(userId) {
       if (this.followButton.text === '关注') {
         followUser(userId).then(res => {