Vue vant使用ImagePreview实现预览图片

发布时间：2022-11-19 文章分类：WEB开发投稿人：樱花字号：默认 | 大 | 超大打印

vant 使用 ImagePreview 预览图片

场景1

编列数组生成图片，点击预览图片

    <div class="zoom"
v-for="(item, index) in listData"
v-show="","2.jpg"],//图片数组
};
},
methods: {
getImg(images, index) {
ImagePreview({
images: this.listData,
showIndex: true,
loop: false,
startPosition: index
});
}
},
computed: { },
created() {}
};
</script>

场景2

一个用字符串，用，分割为数组，编列数组生成图片，点击预览图片

   <div class="zoom"
v-for="(item, index) in imgstr && imgstr.split(',')"
v-show=",2.jpg"
imglist: []
};
},
methods: {
this.imglist = [];
const imgurls = imgstr.split(",");
for (let index = 0; index < imgurls.length; index++) {
this.imglist.push(this.viewImgs(imgurls[index]));
}
ImagePreview({
images: this.imglist,
showIndex: true,
loop: false,
startPosition: index
});
},
computed: { },
created() {}
};
</script>