解决el-image点击后页面无法滚动问题

最新推荐文章于 2024-06-24 16:17:18 发布
最新推荐文章于 2024-06-24 16:17:18 发布
阅读量2.5k 收藏 4
点赞数 3
分类专栏： vue bug 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21761793/article/details/106660724
版权
在使用Element UI的el-image组件时遇到一个问题，即当点击图片后，页面滚动功能被禁用，需要刷新才能恢复正常。问题在于高版本中，image点击后会在body上添加class阻止滚动。解决方案包括：1) 为image标签添加点击事件，执行$nextTick滚动；2) 直接修改el-image源码来解决预览和路由冲突导致的滚动条锁定。
摘要由CSDN通过智能技术生成

问题描述

基于 element-ui 开发过程中，有一个坑，在高版本（2.11+），el-image 渲染后点击图片后，页面无法滚动，必须刷新后正常。获取元素查看后，发现 el-image 图片点击后时会为 <body> 标签自动添加 overflow: hidden; 。这主要是点击图片时，预览锁定了滚动条，同时发生跳转使路由改变覆盖了预览导致的。

解决方案

方案1

给 el-image 标签加上一个点击事件，执行 document.body.style='' ；

方案2

修改相关源码如下

// node_modules / element-ui / lib / element-ui.common.js 第38219行
clickHandler: function clickHandler()
最低0.47元/天 解锁文章
不晓笙
关注
专栏目录
详解elementui之el-image-viewer(图片查看器)
11-30
值得注意的是，虽然`el-image-viewer`在大部分现代浏览器中都能良好运行，但可能在一些老旧的浏览器如IE上存在兼容性问题。因此，如果你的应用需要支持这些浏览器，需要额外考虑适配策略或者寻找其他兼容解决方案。 ...
不点击图片，直接实现el-image的大图预览功能
qq_44712405的博客
04-29 4970
el-image的大图预览功能是一个小组件image-viewer，它的props如下： props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: {...
vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；
qq_48850466的博客
12-11 2479
vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；
element-UI中对el-image添加下载按钮 点击事件传参
最新发布
m0_60831453的博客
06-24 223
【代码】element-UI中对el-image添加下载按钮 点击事件传参。
el-image组件点击图片滚动条消失的解决办法
Black_Gin的博客
05-20 2341
el-image组件的slot = error可自定义加载失败内容，这个功能可以保护我们的页面整洁漂亮，个人在项目中也经常使用，不过最近却发现了一个巨坑，极其影响用户体验。 最近测试发现在编辑某个商品信息时，滚动条有时会消失，导致页面整个卡住，无法保存商品信息，只能刷新页面后才能再次滚动，影响可以说是非常恶劣了。经过一番掉头发后，我发现了问题所在。 我们知道，el-image可通过 previewSrcList 开启预览大图的功能，而在预览大图时，element-ui会向body标签添加overflow:h
vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动
duduya9527的博客
12-04 1006
vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动。按f12，我们在元素版面观察，发现在点击图片之后，body标签上多出了style="overflow: hidden;经过测试，发现两种解决办法。
el-image开启懒加载或使用vue-lazyload有时候图片懒加载无效，一定要页面滚动才会展示
山有木兮木有枝 心悦君兮君不知
10-13 6759
问题场景： 在一个列表中，用el-image来显示图片，并开启懒加载，但前面的图片（如列表的第一、二张图片）需要页面滚动才会显示，明明图片是在浏览器的可是窗口内。 解决方案： 这一般是因为在v-for遍历的时候，:key被设置成了index下标 <ul> <li v-for="(item,index) in imgList" :key="index"> // 这里如果key的值是index， 那每次分页,key的值就又是从0开始 <img
vue中使用element Image 图片 跳转无法滚动问题
qq_39400014的博客
04-14 806
一、简单介绍 今天在写项目的时候，发现在点击完图片跳转后，页面无法滚动。但是同样的跳转方式放在文字上面又可以。然后也在网上查了一些资料，但还是没有问题的正确答案，所以想在这里记录一下问题，以便日后探究。 二、示例代码 <template> <div> <router-link :to="{ path: '/detail/75' }">...
image-viewer
03-25
2. **事件处理**：JavaScript允许通过添加事件监听器来响应用户的交互，如点击、滚动等。例如，使用`addEventListener`方法添加`click`事件监听器，可以在用户点击图像时触发预定义的行为，如切换到下一张图片。 3....
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
在Vue.js中，有时我们需要在特定情况下禁止用户对页面的滚动操作，比如在展示全屏内容或弹出层时。本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先，禁止屏幕滚动的基本思路是通过监听并阻止...
vue指令实现页面图片懒加载鼠标滚动图片开始加载
12-01
<img v-lazy="imageUrl" data-src="path/to/lazy-image.jpg" alt="Lazy Loaded Image"> ``` 在这里，`v-lazy`指令绑定了图片的URL，而`data-src`属性存储了实际的图片资源地址。当图片进入视口，Vue的`v-lazy`指令...
VUE实现从左到右滚动或从右至左滚动
05-31
最后，在`mounted`生命周期钩子中调用`startScroll`方法，以在组件挂载后立即启动滚动效果。在主组件（例如`App.vue`）中，我们可以使用`SeamlessScroll`组件并插入需要滚动的内容： ```html <div v-for=...
Vue框架中使用ElementUI点击图片跳转后，滚动条不见了
weixin_44679078的博客
04-30 1995
在点击图片跳转的时候，有时候滚动条会消失不见了。网上找了一下答案是说这个是bug，原因就是页面跳转后，body被加上了style="overflow: hidden;"的样式。 vue文件的内容如下 <router-link to="../index" title="二手交易平台"> <el-image style="width:100px; height: 10...
elementui 使用el-image 控件 解决 通过点击查看按钮两次才能 实现预览图片
一株木樨的博客
04-21 8498
需求：点击查看按钮，将图片显示出来。 问题：查看按钮必须触发两次才会将图片显示出来 前端效果： 点击查看按钮，弹出来图片 图片展示： 解决方法有两种： 第一种 调用Image 的源码中的image-viewer里面的方法，然后生成预览图片的框，然后通过查看按钮 将预览图片的数据拿到，再调用image-viewer中的clickHandler方法，该方法会将image-viewer中的是否显示的标识置为ture,这样就可以显示了。 image-viewer中 image-viewer中的loadImag
Element-ui 图片预览滚动时候，禁止遮罩层后面的内容滚动
shadow_yi_0416的博客
12-01 2455
需求一：不通过点击图片进行预览，通过点击按钮预览图片。且当前页面没有图片 html代码：按钮 <el-button @click="showImg"> 点击按钮预览图片</el-button> html代码：图片 图片的代码由于element-ui的图片预览组件，要求，图片的属性不能是display：none，且透明度不能为0； 因此，我想其实可以设置一个宽度近乎没有值。 <el-image ref="preview" style="wid
img标签禁止图片拖动
努力中的小曾
08-09 2351
img标签禁止图片拖动 场景是在img标签上 能把里面的图片拖拽出来， 体验不友好，添加这个css样式 pointer-events: none; 图片场景：
el-image等众多图片预览组件在手机微信中无法拖拽
cainiao1412的博客
09-27 799
el-image等图片预览组件在PC或者手机自带浏览器中可以对图片进行拖拽等操作，但是在微信浏览器中打开后，则无效，拖拽毫无反应，
【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-14 1953
el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整。image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true。
el-image点击增加边框
05-11
要给 el-image 添加边框，可以使用 CSS 的 border 属性。在 el-image 标签上添加一个 class，然后在 CSS 中设置该 class 的 border 样式即可。 示例代码如下： ```html <el-image class="image-with-border" src...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值