vant 图片预览

最新推荐文章于 2024-07-25 23:45:19 发布

小鱼仔么么

最新推荐文章于 2024-07-25 23:45:19 发布

阅读量1.2k

点赞数 2

分类专栏： vant 文章标签： Vant UI Vue TypeScript 图片预览 ImagePreview

本文链接：https://blog.csdn.net/weixin_43918803/article/details/112275690

版权

vant 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用vant/vue --ts图片预览

实现效果
在这里插入图片描述
vant ui

<van-row gutter="20">
   <div v-for="(item,index) in financialInfoData" :key="index">
     <van-col span='8'>
       <div class="q-image-wrap">
         <!-- 图片缩略图  -->
         <van-image width="3rem" height="3rem" fit="fill"  :src='item.path' @click='sceneImg(financialInfoData, index)'/>
       </div>
     </van-col>
  </div>
</van-row>

vue文件内引入ImagePreview
import { ImagePreview } from "vant"
export default class index extends Vue{
    public financialInfoData: Array<string> = [
      {path: 'data:image/jpeg;base64,xxxxxxxxxxxx'},
      {path: 'data:image/jpeg;base64,xxxxxxxxxxxx'},
      {path: 'data:image/jpeg;base64,xxxxxxxxxxxx'},
      {path: 'data:image/jpeg;base64,xxxxxxxxxxxx'}
    ]
    // 点击图片预览
    sceneImg(images: any, index: number) {
        ImagePreview({
            images: images.map((v: any)=> v.path), //需要预览的图片 URL 数组
            showIndex: true, //是否显示页码
            loop: false,//是否开启循环播放
            closeOnPopstate: true, //是否在页面回退时自动关闭
            startPosition: index  //图片预览起始位置索引
        })
    }
    
}