当前位置: 首页 > 工具软件 > ImagePreview > 使用案例 >

vant ImagePreview 图片预览

王季萌
2023-12-01

vant ImagePreview 图片预览

实现方式就是在image标签上面加上点击后跳转的方法,方法内根据当前图片集合和点击的下标创建vant imagePreview的预览

<van-image class="maintain_end_info_img"
                                    v-for="(item,i) in images"
                                    :key="i"
                                    width="50"
                                    height="50"
                                    radius="5"
                                    :src=item
                                    @click="imagesPerview(images, i)"
                        />







<script>

import { ImagePreview} from 'vant'


export default {
  data() {
    return {
      index: 0,
      images: [],//放入图片路径
    }
  },



  methods: {
    imagesPerview(images, index) {
      ImagePreview({
        images: this.images,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    },

    },

  
}
</script>




 类似资料: