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>

效果图

Vue vant使用ImagePreview实现预览图片

Vue vant使用ImagePreview实现预览图片

Vue vant使用ImagePreview实现预览图片

图片预览正确的打开方式 vue-vant中ImagePreview

在使用vue的过程中，vant在移动端的地位还是很高的，本文简单介绍一下如何在自己项目中实现ImagePreview图片预览效果，获取图片索引,点击哪一张就预览哪一张

效果图如下

Vue vant使用ImagePreview实现预览图片

实现步骤，分为3步

1、局部注册ImagePreview

import { ImagePreview } from "vant";

2、创建处理函数open，执行imagepreview函数

关键参数：图片数组、图片索引、是否可关闭

Vue vant使用ImagePreview实现预览图片

3、点击图片调用open函数预览效果

Vue vant使用ImagePreview实现预览图片

在vant中 ImagePreview 图片预览的详细参数请看这里点击查看更多喔！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。