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

最新推荐文章于 2024-05-16 13:50:30 发布
最新推荐文章于 2024-05-16 13:50:30 发布
阅读量808 收藏
点赞数
文章标签： java 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexin76/article/details/134436416
版权

 主要原因事与弹出层混合使用导致图片预览出现宽度丢失

showImagePreview({

      images: [img],

      showIndex: false,

      teleport: '.preview-img'//挂载在html中任意节点改变（最好另新增节点）

    });

样式中调整谨慎使用穿透

<style lang="less" >

.preview-img {

  .van-swipe-item {

    width: 100vw;

  }

}

</style>

vant4弹出层还有很多样式问题，欢迎讨论，可能是我菜了用法不对所以出些奇怪bug

前端菜g
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue Vant ImagePreview 图片预览 实现滑动
qq_49879334的博客
06-18 1552
需求：点击图片可以放大，如果是多张图片，实现滑动 html <div class="comment comment-img" @click="seeImg()" v-if="evaluation.evaluationImage" > <van-image v-for="(imageItem, index) in JSON.parse(evaluation.evaluationImage)" :key=
vant上传图片跟视频混合上传加预览demo
11-08
vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: ...
ImagePreview 图片预览 的使用​
m0_65812066的博客
01-08 4961
ImagePreview 是一个函数（必须使用按需到处），调用函数后会直接在页面中展示图片预览界面。4、在 img 点击事件处理函数中，调用 ImagePreview 预览。1、从文章内容中获取到所有的 img DOM 节点。3、遍历所有 img 节点，给每个节点注册点击事件。2、获取文章内容中所有的图片地址。二、处理图片点击预览。
vant4实现图片放大预览
monkey7
03-22 1218
vant4使用showImagePreview 实现图片点击全屏预览
vue+vant实现图片预览
追风筝的博客
11-18 519
图片点击预览 <div class="img_box" v-for="(image, i) in interestDetails.picUrl" :key="i" > <img :src="image" alt="预览图片" style="width:100%;border-radius:8px;" @click="getImg(image, i, interestDetails.picUrl)" /&g
vant showImagePreview 图片预览用法
jjw_zyfx的博客
03-13 2278
vant showImagePreview 图片预览用法
vant组件库中ImagePreview实现点击预览图片功能
你喜欢大熊猫嘛
01-06 2134
vant组件库中ImagePreview实现点击预览图片功能
vant组件库的SwipeCell组件无法拖动，无法滑动，无样式等问题
xiaobuzq的博客
01-20 1346
如果发现组件没有样式的话，在上方导入对应的样式就可以了，这里导入的是SwipeCell组件样式，同理，发现哪个组件没样式就导入哪个组件的样式就可以了。使用了vant组件库的SwipeCell组件发现无法滑动，如何把浏览器切换成移动端是可以滑动组件的。查阅了资料，发现是pc端和移动的监听事件是不同的，需要下载一个插件才能在pc端使用。打开终端进行安装，我使用的是pnpm包管理工具，按自己使用的包管理工具来安装。然后在pc端就可以拖动和滑动了，这个组件在pc端有点难拖动，多试几次就好了。
vue+vant使用图片预览功能ImagePreview的问题解决
10-15
如果Vant的`ImagePreview`组件不能满足复杂的图片预览需求，可以考虑使用`Viewer.js`，这是一个独立的图片预览插件，提供了更多的自定义选项和事件监听。 1. **安装依赖**：使用npm安装`viewerjs`，例如：`npm i ...
vant-image本地图片无法显示
01-07
正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../...
js图片上传预览(ImagePreview)
12-03
js开发的兼容ie，ff的图片上传预览小程序，在后台支持下（asp.net）还兼容其他浏览器
vue3图片预览插件.zip
06-14
要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，放心使用。 实现方式参考了 vant 部分源码，纯手写并未使用任何三方插件，可放心使用。本来只是一...
vue 使用vant中的图片预览功能
夏夏
12-09 1万+
ImagePreview 图片预览 介绍 图片放大预览，支持函数调用和组件调用两种方式。 函数调用 ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。 import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 组件调用 通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。 import Vue from
vant ImagePreview 图片预览
qq_39517116的博客
03-17 2607
vant ImagePreview 图片预览 <van-image class="maintain_end_info_img" v-for="(item,i) in images" :key="i" width="50" .
vant实现图片的预览事例
weixin_45389051的博客
08-10 965
vant在移动端还是挺香的 首先先说一下按需导入vant吧 cnpm i vant --save cnpm i babel-plugin-import --save-dev 在项目根目录,也就是src平级目录建立一个.babelrc文件 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } 如何预
Vue vant 使用 ImagePreview 预览图片
热门推荐
z772330927的博客
07-03 1万+
Vue vant 使用 ImagePreview 预览图片 场景1 编列数组生成图片，点击预览图片 <div class="zoom" v-for="(item, index) in listData" v-show="item" :key="index" > <img v-if="item" class="img"
图片预览正确的打开方式 vue-vant中ImagePreview
ZXH0122的博客
11-26 1691
在使用vue的过程中，vant在移动端的地位还是很高的，本文简单介绍一下如何在自己项目中实现ImagePreview图片预览效果，获取图片索引,点击哪一张就预览哪一张 一、效果图如下 二、实现步骤，分为3步 1、局部注册ImagePreview import { ImagePreview } from "vant"; 2、创建处理函数open，执行imagepreview函数 关键参数：图片数组、图片索引、是否可关闭 3、点击图片调用open函数预览效果 在vant中 ImagePreview 图
图片预览功能（vant ImagePreview）
weixin_44758753的博客
01-29 873
图片点击预览
vant pc端 swipe 组件 鼠标滑动失效或者异常
最新发布
qq_38233172的博客
05-16 430
dragstart.prevent 阻止pc 端默认的拖动事件，利用@vant/touch-emulator将鼠标事件转换成touch事件。全局引入import "@vant/touch-emulator";之后，在pc端鼠标拖动达不到 移动端的效果需要增加。
如何用axios接口数据实现vant图片预览
07-14
要使用 axios 获取接口数据并实现 Vant 图片预览功能，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 axios 和 vant 组件库。如果没有安装，可以通过运行以下命令进行安装： ``` npm install axios vant ``` 2. 在您的代码中导入 axios 和 vant 相关组件： ```javascript import axios from 'axios'; import { ImagePreview } from 'vant'; ``` 3. 使用 axios 发起请求获取图片数据，并将其保存到一个变量中： ```javascript axios.get('your_api_endpoint').then(response => { const imageData = response.data; // 假设返回的数据是一个包含图片信息的数组 // 其他处理逻辑... }); ``` 在上述代码中，`your_api_endpoint` 应替换为您实际的接口地址，`response.data` 是获取到的接口数据。 4. 在需要预览图片的地方，使用 Vant 的 `ImagePreview` 组件来实现图片预览功能。例如，您可以在一个图片列表中循环渲染图片，并为每个图片添加点击事件： ```html <template> <div> <img v-for="image in imageData" :src="image.url" @click="previewImage(image.url)" /> </div> </template> ``` 5. 在 Vue 实例的方法中定义 `previewImage` 方法，该方法使用 `ImagePreview` 组件来预览图片： ```javascript methods: { previewImage(url) { ImagePreview([{ url }]); } } ``` 在上述代码中，`url` 是被点击的图片的 URL。 通过以上步骤，您可以使用 axios 获取接口数据，并使用 Vant 的 `ImagePreview` 组件实现图片预览功能。请注意根据您的实际情况进行适当的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值