vue Vant ImagePreview 图片预览实现滑动

最新推荐文章于 2024-09-23 20:56:39 发布

努力的小雷

最新推荐文章于 2024-09-23 20:56:39 发布

阅读量1.6k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_49879334/article/details/118020370

版权

本文介绍了如何在Vue项目中利用Vant的ImagePreview组件实现点击图片放大并支持多图滑动预览的功能。通过HTML和JavaScript代码示例，详细阐述了接收图片数据、传递值以及调用预览方法的步骤，并提供了实现效果的截图。

摘要由CSDN通过智能技术生成

需求：点击图片可以放大，如果是多张图片，实现滑动
html

	<div class="comment comment-img"
	      @click="seeImg()"
	      v-if="evaluation.evaluationImage"
	    >
	      <van-image
	        v-for="(imageItem, index) in JSON.parse(evaluation.evaluationImage)"
	        :key="index

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力的小雷

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

imagepreview使用案例_vue+vant使用图片预览功能ImagePreview的问题解决

weixin_28879085的博客

02-23

1263

如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：着实让员外百思不其解，在调用vant 的 ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview 和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时...

vue原生项目vant使用图片预览组件ImagePreview报错（非脚手架，cdn引入js文件使用组件）

刺心的博客

03-16

2115

在非脚手架的原生项目中使用: import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 这么写会报错，那么怎么解决这个问题呢，其实很简单因为不是脚手架安装的vantUI，用法有些不同，有些组件需要在前面加vant 正确ImagePreview的用法： vant.ImagePreview(['https://ss0.bdstatic.com/70cFuHSh_Q1YnxG

参与评论您还未登录，请先登录后发表或查看评论

vue+vant使用图片预览功能ImagePreview的问题解决

10-15

主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue Picture Swipe 图片滑动库指南

gitblog_00424的博客

08-15

707

Vue Picture Swipe 图片滑动库指南 vue-picture-swipe???? Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe项目地址:https://gitcode.com/gh_mirrors/vu/vue-picture...

vant4 ImagePreview 图片预览，图片放大后不能拖动

hexin76的博客

11-16

937

teleport: '.preview-img'//挂载在html中任意节点改变（最好另新增节点）vant4弹出层还有很多样式问题，欢迎讨论，可能是我菜了用法不对所以出些奇怪bug。主要原因事与弹出层混合使用导致图片预览出现宽度丢失。样式中调整谨慎使用穿透。

van-image移动端点击图片预览

ss_Tina的博客

03-31

2056

van-image预览图片，点击图片预览大图。

图片预览功能（vant ImagePreview）

weixin_44758753的博客

01-29

908

图片点击预览

vant ImagePreview 图片预览

qq_39517116的博客

03-17

2642

vant ImagePreview 图片预览 <van-image class="maintain_end_info_img" v-for="(item,i) in images" :key="i" width="50" .

曲线解决van-image-preview长按保存图片

u012214254的专栏

03-25

3467

项目中使用到了vant组件库中ImagePreview组件来查看大图，单单只是浏览大图的话确实很好用，如果要加上其他功能就比较繁琐，查看了官方文档，ImagePreview没有提供长按事件以及相对应的方法，社区https://ask.dcloud.net.cn/question/66750也有同胞遇到相同的问题，依旧没有解决，开发时间有限只有曲线解决一下这个问题。当然，这个问题也可以通过调用原...

ImagePreview封装图片预览

wendy_qx的博客

08-15

246

【代码】封装图片预览。

vue 使用vant中的图片预览功能

热门推荐

夏夏

12-09

1万+

ImagePreview 图片预览介绍图片放大预览，支持函数调用和组件调用两种方式。函数调用 ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。 import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 组件调用通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。 import Vue from

vue2使用Vant组件轮播图实现图片预览

Tang_96的博客

12-27

1569

在轮播图的图片上绑定一个点击事件传入轮播图下标,当点击这个图片的时候将下标赋值给预览图片的初始索引,以达到点击第几张轮播的图片预览第几张。视图部分添加初始索引属性startPosition,另外在data属性中记得要定义。步骤三:使用该组件视图。

vue项目中显示图片下载(使用vant的图片预览)

好气嗷，但仍要保持微笑!

03-18

6391

<template> <van-image-preview v-model="isShowImg" :images="image" @change="imgChange"> <div slot="cover" class="color-high"> <van-icon name="down" class="down-img" @cl...

vue---图片预览（h5手机端--vant插件）

岁末zzz的博客

07-16

2764

npm i vant -S import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); vant的ImagePreview 图片预览组件组件调用如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 Vue.use 注册组件...

VUE3 移动端自制左右滑动预览视频和图片

qq_43186310的博客

10-16

560

本来用的是vant的图片预览组件进行改造的，以便预览图片和视频，后来发现体验太差，于是自己写了一套demo。注：右上角还需要一个关闭按钮，有需要的自己添加吧，方法有：webCloseMedia，页面样式没写。主要注意点就是切换的时候要销毁视频，使其重新加载，以免卡顿。视频组件：vue3-video-play。

使用vant-image和ImagePreview实现预览图片可左右滑动

vue Vant ImagePreview 图片预览 实现滑动

vue Vant ImagePreview 图片预览实现滑动