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

最新推荐文章于 2024-03-22 17:11:36 发布
最新推荐文章于 2024-03-22 17:11:36 发布
阅读量503 收藏
点赞数
文章标签： 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
    评论
vant上传图片跟视频混合上传加预览demo
11-08
vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: https://download.lllomh.com/cliect/#/product/JB08857273648214
vue +vant 适合手机端上传图片图片 实现了上传、压缩、旋转图片
01-20
html界面 JS部分 部分手机拍照时，正面拍照照片会旋转 解决问题：使用exif.js来获取图像数据，然后进行处理 ** 1. 安装依赖 npm install exif-js --save 2. 获取图像数据 EXIF.getData(); 获取某个数据方向参数 EXIF.getTag(this, 'Orientation'); js完整代码如下，直接拷贝使用 mport Exif from 'exif-js'; data() {         return {             files: {                 name: ,          
vue+vant使用图片预览功能ImagePreview的问题解决
10-15
主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 使用vant中的图片预览功能
夏夏
12-09 1万+
ImagePreview 图片预览 介绍 图片放大预览，支持函数调用和组件调用两种方式。 函数调用 ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。 import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 组件调用 通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。 import Vue from
vant4实现图片放大预览
最新发布
monkey7
03-22 499
vant4使用showImagePreview 实现图片点击全屏预览
vue移动端开发 vant框架使用 ImagePreview 之 图片预览 放大
weixin_40320187的博客
11-15 5681
1.HTML部分 <div class="block" @click="open(index)"> <div class="img" v-if="bottomData.length>0"> <img ...
vant图片预览
xiaoququ的博客
10-19 3265
代码 <div class="image"> <p>支付凭证</p> <van-image width="2.7rem" height="2.7rem" fit="cover" :src="item" v-for="(i...
vant showImagePreview 图片预览用法
jjw_zyfx的博客
03-13 2040
vant showImagePreview 图片预览用法
ImagePreview 图片预览 的使用​
m0_65812066的博客
01-08 4422
ImagePreview 是一个函数（必须使用按需到处），调用函数后会直接在页面中展示图片预览界面。4、在 img 点击事件处理函数中，调用 ImagePreview 预览。1、从文章内容中获取到所有的 img DOM 节点。3、遍历所有 img 节点，给每个节点注册点击事件。2、获取文章内容中所有的图片地址。二、处理图片点击预览。
图片预览功能（vant ImagePreview）
weixin_44758753的博客
01-29 832
图片点击预览
vue2使用vant组件库；使用rem后vant组件样式变小了。
i_am_a_div的博客
10-09 2155
vue2使用vant组件库；vue2使用vant组件库;使用rem后vant组件样式变小了。
vue+vant实现图片预览
追风筝的博客
11-18 481
图片点击预览 <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
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，放心使用。 实现方式参考了 vant 部分源码，纯手写并未使用任何三方插件，可放心使用。本来只是一个简单的 pc 端图片预览插件，但是考虑到有些小伙伴可能需要兼容移动端，故特意做了兼容
vant-image本地图片无法显示
01-07
坑： 正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../assets/logo.png') 完美解决： 加载失败 //script(vue) data() { return { //图片资源 imgList: [ require(“../assets/icon_emeetnote_nor.png”),
vue项目结合,vant 实现中轮播图中，点击图片放大图片
DTCloud
04-23 1003
【代码】vue项目结合,vant 实现中轮播图中，点击图片放大图片。
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"
vant 预览 图片
cmmboy1990的博客
06-21 1168
vant 预览 图片 1.核心代码 <!-- --> <template> <div class=''> <van-nav-bar title="预览png" left-text="返回" left-arrow class="title" @click-left="onClickLeft"
vant组件库中ImagePreview实现点击预览图片功能
你喜欢大熊猫嘛
01-06 2000
vant组件库中ImagePreview实现点击预览图片功能
Image preview
08-16
要实现图片预览，可以使用Vant UI框架中的ImagePreview组件。首先需要引入ImagePreview和其他组件，可以通过以下代码进行引入： ```javascript import Vue from 'vue'; import { ImagePreview } from 'vant'; Vue.use(ImagePreview); ``` 然后，在需要进行图片预览的地方，可以直接调用ImagePreview函数，并传入图片数组作为参数。例如： ```javascript ImagePreview(['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg']); ``` 另外，如果需要在点击图片时进行预览，可以在点击事件处理函数中调用ImagePreview。首先，获取到所有的img节点，然后给每个img节点绑定点击事件，在点击事件处理函数中调用ImagePreview函数，并传入图片数组和起始位置。例如： ```javascript previewImage() { const articleContent = this.$refs['article-content']; const imgs = articleContent.querySelectorAll('img'); const images = []; imgs.forEach((img, index) => { images.push(img.src); img.onclick = function() { ImagePreview({ images, startPosition: index }); }; }); } ``` 这样就可以实现点击图片进行预览的功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [ImagePreview 图片预览](https://blog.csdn.net/qq_45457269/article/details/131441020)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [ImagePreview 图片预览 的使用​](https://blog.csdn.net/m0_65812066/article/details/128605204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值