图片预览

zhiyangdu
1 parent e2d99d7f
Showing 2 changed files with 36 additions and 4 deletions
src/components/palaceGrid/palaceGrid.less
src/components/palaceGrid/palaceGrid.vue
@@ -44,4 +44,14 @@
             }
 		}
 	}
+    .van-image-preview__index{
+        font-size: 30px;
+    }
+    .van-swipe__indicators{
+        bottom: 100px;
+        .van-swipe__indicator{
+            width: 16px;
+            height: 16px;
+        }
+    }
 }
@@ -2,7 +2,7 @@
     <div class="palace-grid-box" v-if="grids && grids.list && grids.list.length">
 		<div class="box">
 			<div class="img-box" >
-                <div :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">
+                <div @click.stop="imagePreview(index)" :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">
                     <van-image
                         v-if="index<9"
                         class="img"
@@ -13,6 +13,9 @@
                 </div>
 			</div>
 		</div>
+        <van-image-preview v-model="show" :swipeDuration="20000" :start-position="index" :show-indicators="true" :images="grids.list" @change="onChange">
+            <template v-slot:index>第{{ index }}页</template>
+        </van-image-preview>
     </div>
 </template>
  
@@ -20,18 +23,37 @@
     export default {
 		name: "palaceGrid",
         data: function () {
-            return {
+            return {show: false,
+                index: 0,
+                images: [
+                    'https://img.yzcdn.cn/1.jpg',
+                    'https://img.yzcdn.cn/2.jpg'
+                ]
+
             }
         },
         props: ["grids"],
 		methods: {
-
 			/**
 			 * 点击跳转事件绑定
 			 */
 			jump(item) {
 				this.$emit("jump", item);
-			}
+			},
+            /**
+             * 图片预览
+             */
+            imagePreview(index){
+                this.show = true;
+                this.index = index;
+
+            },
+            /**
+             * 点击轮播图变大
+             */
+            onChange(index) {
+                this.index = index;
+            }
 		}
     }
 </script>