页面引入showImagePreview (展示一个全屏的图片预览组件)
import { showImagePreview } from 'vant';
van-image 是用来展示的小图 点击小图 调用showImagePreview放大
<van-cell v-if="img != null && img.length != 0" title="图片预览"></van-cell><div v-if="img != null && img.length != 0"><van-imagewidth="5rem"height="5rem"fit="cover"position="left"@click="imagePreview()":src="'data:image/jpg;base64,' + img"style="margin: 5px 5px 100px;"/></div>
img是在data里提前定义的 回显时用来存储base64
// 预览imagePreview(){showImagePreview({images: ['data:image/jpg;base64,' + this.img],closeable: true,});},
上述方式是展示一张图
多图的就循环一下子 按以下方式
<van-cell v-if="img != null && img.length != 0" title="图片"></van-cell><div v-if="img != null && img.length != 0"><van-imagewidth="5rem"height="5rem"fit="cover"position="left"@click="imagePreview(index)":key="index"v-for="(item, index) in img":src="'data:image/jpg;base64,' + item"style="margin: 5px;"/></div>
// 预览imagePreview(index){let imgAry = []this.img.forEach(item => {imgAry.push('data:image/jpg;base64,' + item)})showImagePreview({images: imgAry,closeable: true,startPosition: index,});},
startPosition 可以指定初始位置
showIndex 是否显示页码 默认是显示的
showIndicators 是否显示轮播指示器 默认不显示
closeable 是否显示关闭图标 默认不显示
closeIconPosition 关闭图标位置 可选值为 top-left bottom-left bottom-right 默认是top-right
另外还有个onClose 可以监听关闭事件
howImagePreview({images: this.img,onClose() {showToast('关闭');},});