vant 图片预览

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

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

实现效果  
![在这里插入图片描述][2021010615194537.gif_pic_center]  
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  //图片预览起始位置索引
            })
        }
        
    }

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

[2021010615194537.gif_pic_center]: /images/20221119/cfa5c8453e5a45fdb88c7e879d26d7b1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，701人围观）

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

相关阅读

相关 Vant轮播预览图片

<van-swipe :autoplay="10000" class="swiper"> <van-swipe-item v-f

「爱情、让人受尽委屈。」/ 2023年10月11日 10:42/ 0 赞/ 181 阅读

相关 vue图片预览

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

蔚落/ 2023年07月18日 02:48/ 0 赞/ 157 阅读

相关 vant图片上传的功能带预览

文档 https://youzan.github.io/vant/\/zh-CN/uploader vue组件 <template> <div cla

忘是亡心i/ 2023年02月15日 12:52/ 0 赞/ 40 阅读

相关 vant 图片预览

使用vant/vue --ts图片预览实现效果 ![在这里插入图片描述][2021010615194537.gif_pic_center] vant ui

ゝ一纸荒年。/ 2023年01月03日 01:20/ 0 赞/ 702 阅读

相关单图片预览

implementation 'cn.bingoogolapple:bga-photopicker:1.2.8@aar' implementation

一时失言乱红尘/ 2022年08月29日 15:55/ 0 赞/ 597 阅读

相关 Vue项目中使用Vant的“ImagePreview 图片预览”组件

html示例代码： <img :src="imageUrl" alt="" @click="getImg()"> js示例代码： import { Im

小咪咪/ 2022年08月29日 00:10/ 0 赞/ 563 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 706 阅读

相关 BootStrap 图片预览

官网地址：http://plugins.krajee.com/file-input 效果 ![70][] 其他参考资料： https://blog.csdn.net/u

左手的ㄟ右手/ 2022年05月28日 03:30/ 0 赞/ 647 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 924 阅读

相关 uniapp预览图片

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

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1476 阅读