el-image等众多图片预览组件在手机微信中无法拖拽

最新推荐文章于 2024-04-17 14:16:49 发布
最新推荐文章于 2024-04-17 14:16:49 发布
阅读量793 收藏 1
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiao1412/article/details/127066398
版权

el-image等图片预览组件在PC或者手机自带浏览器中可以对图片进行拖拽等操作，但是在微信浏览器中打开后，则无效，拖拽毫无反应，

这是因为微信浏览器自身做了限制，并非组件库的bug，微信浏览器里如果想预览图片就必须要用微信自身的sdk api：概述 | 微信开放文档

引入微信js：http://res.wx.qq.com/open/js/jweixin-1.6.0.js，然后执行下图中的方法即可实现图片预览：

 

多动手,勤思考
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决el-image点击后页面无法滚动问题
不晓笙的博客
06-10 2557
解决el-image点击后页面无法滚动问题 问题描述 基于 element-ui 开发过程中，有一个坑，在高版本（2.11+），el-image 渲染后点击图片后，页面无法滚动，必须刷新后正常。获取元素查看后，发现 el-image 图片点击后时会为 <body> 标签自动添加 overflow: hidden; 。这主要是点击图片时，预览锁定了滚动条，同时发生跳转使路由改变覆盖了预览导致的。 解决方案 给 el-image 标签加上一个点击事件，执行 document.body.style=
vue中实现拖拽，复制粘贴操作获取上传图片
有问题 ! 请留言 !
11-12 7431
拖拽，复制粘贴操作获取图片 因为最近项目需要实现一个图片组件，包含压缩，拖拽上传，复制上传，图片裁剪，兼容多图和单图上传功能，好像这类组件也比较少，所以自己就封装了一个，连带着相关知识也熟悉了。这里分开几篇写，下面说一下图片拖拽，复制粘贴获取文件 首先复制粘贴是只支持微信qq或者钉钉上的截图的，而本地文件是不支持的,且复制粘贴不支持同时上传多张 其次拖拽上传支持本地的文件，不支持截图的拖拽 ...
vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动
duduya9527的博客
12-04 995
vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动。按f12，我们在元素版面观察，发现在点击图片之后，body标签上多出了style="overflow: hidden;经过测试，发现两种解决办法。
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
前端小伍的博客
06-29 1191
移动端单指拖拽和双指放大功能的实现，根据业务需求在预览组件上添加移动端的操作功能。
vue图片防止被拖拽
chq810884578的博客
08-01 231
vue图片防止被拖拽
【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-14 1951
el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整。image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true。
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
在Vue.js中，有时我们需要在特定情况下禁止用户对页面的滚动操作，比如在展示全屏内容或弹出层时。本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先，禁止屏幕滚动的基本思路是通过监听并阻止...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
在Electron中简单实现拖拽功能
weixin_40494579的博客
11-06 4349
背景 实现简单的拖拽文件、图片到系统本地，拖拽消息体文本发送（类似于微信、QQ中的功能） 实现拖拽到本地系统，不考虑mouse实现方式，使用Electron中的startdrag配合Browser的Drag and Drop startdrag Electron API (startDrag) 提供拖拽文件到桌面系统本地的能力 使用情况比较简单，主进程监听事件，调用startdrag // main-process ipcMain.on('drag-start', (event) => { e
Vue2实用组件集
m0_56376264的博客
11-21 247
Vue2实用组件集
vant4 ImagePreview 图片预览，图片放大后不能拖动
hexin76的博客
11-16 864
teleport: '.preview-img'//挂载在html中任意节点改变（最好另新增节点）vant4弹出层还有很多样式问题，欢迎讨论，可能是我菜了用法不对所以出些奇怪bug。主要原因事与弹出层混合使用导致图片预览出现宽度丢失。样式中调整谨慎使用穿透。
el-dialog 拖动 el-image 放大点击蒙版可关闭
记录常见的问题以及解决办法
10-08 923
使用的时候 在el-dialog标签上加上 v-dialogDrag 即可使用。直接引入 例如：import './directive/index.js'把下面文件新建一个 js文件 之后引入到mian.js 中。el-dialog 拖动 自定义指令。el-image 放大点击蒙版可关闭。
拖拽图片js
qq_41834729的博客
09-15 170
拖拽图片js vue图片McBigPicture.vue <template> <div class="demo-image__placeholder" > <div class="block draggable-box" :style="{width:bigpicturewidth+'px',height:bigpictureheight+'px'}"> <el-image :style="{width:bigpicturewidth+'
elementuiPlus 中的 el-image 实现全屏展示，放大缩小配置偶尔失效？
weixin_43743804的博客
04-17 1177
elementuiPlus 中的 el-image 实现全屏展示，放大缩小配置偶尔失效？
VUE+ElementUI+VueDraggable +El-ImageViewer 实现图片批量上传，支持拖拽控制顺序及图片预览
ADKII的博客
07-25 535
话不多说，上代码，没安vuedraggable的小伙伴们自行安装一下。控制了下图片显示的大小，另支持点击查看原图功能。
vue h5手机端 图片随意拖拽触摸事件
maoyuanh的博客
02-15 747
vue h5手机端 图片随意拖拽并且不超过页面范围，touch事件不影响点击事件，区分开
移动端拖拽的时候不触发点击事件
一点点ning0_o
09-01 4690
var isClick = true; $('li').on('touchstart', function(e){ console.log($(this)); isClick = true; }); $('li').on('touchmove', function(e){ isClick = false; }); $('li').on('touchend', function(e
如何触发el-image的图片预览
最新发布
09-07
在Element UI库中的`el-image`组件中，如果想要触发图片的预览功能，通常会配合`el-dialog`或者其他弹窗组件一起使用。以下是一个基本的例子： 1. 首先，你需要有一个`el-image`元素，它有一个`preview-src`属性用于指定预览图的URL： ```html <el-image :src="currentImage" :preview-src="previewImageUrl" class="image-preview"></el-image> ``` 其中`currentImage`是主图的URL，`previewImageUrl`是预览图的URL。 2. 当用户点击`el-image`时，可以设置一个事件监听器，比如`click`事件，然后打开一个`el-dialog`： ```javascript <template> <el-button @click="showPreview">查看大图</el-button> <el-dialog :visible.sync="dialogVisible" width="80%"> <el-image :src="previewImageUrl" fit></el-image> </el-dialog> </template> <script> export default { data() { return { currentImage: 'your_main_image_url', previewImageUrl: '', dialogVisible: false, }; }, methods: { showPreview() { this.dialogVisible = true; // 这里可以根据需要设置预览图的URL this.previewImageUrl = this.currentImage; // 如果你想预览当前的主图 } } }; </script> ``` 当用户点击“查看大图”按钮，`showPreview`方法会被调用，预览图会在`el-dialog`中显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值