vant 图片预览

ゝ一纸荒年。 2023-01-03 01:20 698阅读 0赞

使用vant/vue —ts图片预览

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

  1. <van-row gutter="20">
  2.    <div v-for="(item,index) in financialInfoData" :key="index">
  3.      <van-col span='8'>
  4.        <div class="q-image-wrap">
  5.          <!-- 图片缩略图  -->
  6.          <van-image width="3rem" height="3rem" fit="fill"  :src='item.path' @click='sceneImg(financialInfoData, index)'/>
  7.        </div>
  8.      </van-col>
  9.   </div>
  10. </van-row>
  12. vue文件内引入ImagePreview
  13. import {  ImagePreview } from "vant"
  14. export default class index extends Vue{ 
  15.     public financialInfoData: Array<string> = [
  16.       { path: 'data:image/jpeg;base64,xxxxxxxxxxxx'},
  17.       { path: 'data:image/jpeg;base64,xxxxxxxxxxxx'},
  18.       { path: 'data:image/jpeg;base64,xxxxxxxxxxxx'},
  19.       { path: 'data:image/jpeg;base64,xxxxxxxxxxxx'}
  20.     ]
  21.     // 点击图片预览
  22.     sceneImg(images: any, index: number) { 
  23.         ImagePreview({ 
  24.             images: images.map((v: any)=> v.path), //需要预览的图片 URL 数组
  25.             showIndex: true, //是否显示页码
  26.             loop: false,//是否开启循环播放
  27.             closeOnPopstate: true, //是否在页面回退时自动关闭
  28.             startPosition: index  //图片预览起始位置索引
  29.         })
  30.     }
  32. }

可参考vant ui ImagePreview组件根据需求修改参数

发表评论

表情：
评论列表 （有 0 条评论，698人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue图片预览

    vue结合vant实现图片视频预览 1. 给图片或视频添加点击事件 <div class="comment_image_box_list" v-for="(im

    蔚落蔚落/ 0 赞/ 153 阅读

    相关 uniapp预览图片

    一、需求 最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。 点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

    以你之姓@以你之姓@/ 0 赞/ 1474 阅读