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

最新推荐文章于 2024-02-27 19:04:21 发布
最新推荐文章于 2024-02-27 19:04:21 发布
阅读量2.4k 收藏 3
点赞数 3
分类专栏： vue bug 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21761793/article/details/106660724
版权
vue 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
bug
3 篇文章 0 订阅
订阅专栏

问题描述

基于 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() {
  // prevent body scroll
  if (!this.preview) return	// ----加上这行----
  prevOverflow = document.body.style.overflow;
  document.body.style.overflow = 'hidden';
  this.showViewer = true;
},
不晓笙
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
element-ui新版本el-image点击事件导致body标签滚动条消失的一个坑
薛定喵君的博客
05-06 2661
element-ui图片标签的一个坑 相关源码 version: "2.13.0" node_modules->element-ui->lib->element-ui.common.js文件L38219附近 clickHandler: function clickHandler() { // prevent body scroll prevOverflow = d...
vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
最新发布
qq_44552416的博客
02-27 793
需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 el[email protected]，使用前请熟悉： el[email protected] el[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；
qq_48850466的博客
12-11 2372
vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；
el-image组件点击图片滚动条消失的解决办法
Black_Gin的博客
05-20 2233
el-image组件的slot = error可自定义加载失败内容，这个功能可以保护我们的页面整洁漂亮，个人在项目中也经常使用，不过最近却发现了一个巨坑，极其影响用户体验。 最近测试发现在编辑某个商品信息时，滚动条有时会消失，导致页面整个卡住，无法保存商品信息，只能刷新页面后才能再次滚动，影响可以说是非常恶劣了。经过一番掉头发后，我发现了问题所在。 我们知道，el-image可通过 previewSrcList 开启预览大图的功能，而在预览大图时，element-ui会向body标签添加overflow:h
vue中使用element Image 图片 跳转无法滚动问题
qq_39400014的博客
04-14 742
一、简单介绍 今天在写项目的时候，发现在点击完图片跳转后，页面无法滚动。但是同样的跳转方式放在文字上面又可以。然后也在网上查了一些资料，但还是没有问题的正确答案，所以想在这里记录一下问题，以便日后探究。 二、示例代码 <template> <div> <router-link :to="{ path: '/detail/75' }">...
el-image开启懒加载或使用vue-lazyload有时候图片懒加载无效，一定要页面滚动才会展示
山有木兮木有枝 心悦君兮君不知
10-13 6239
问题场景： 在一个列表中，用el-image来显示图片，并开启懒加载，但前面的图片（如列表的第一、二张图片）需要页面滚动才会显示，明明图片是在浏览器的可是窗口内。 解决方案： 这一般是因为在v-for遍历的时候，:key被设置成了index下标 <ul> <li v-for="(item,index) in imgList" :key="index"> // 这里如果key的值是index， 那每次分页,key的值就又是从0开始 <img
el-image等众多图片预览组件在手机微信中无法拖拽
cainiao1412的博客
09-27 668
el-image等图片预览组件在PC或者手机自带浏览器中可以对图片进行拖拽等操作，但是在微信浏览器中打开后，则无效，拖拽毫无反应，
不点击图片，直接实现el-image的大图预览功能
qq_44712405的博客
04-29 4714
el-image的大图预览功能是一个小组件image-viewer，它的props如下： props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: {...
Oracle查询服务器端和客户端字符集常见字符集及解决方案
qq_34412985的博客
05-21 2871
Oracle 字符集常见字符集及解决方案 优先级别：alter session>环境变量>注册表>参数文件 一.查看字符集： 1.查询服务端字符集： select userenv(‘language’) from dual or select * from nls_database_parameters 2.查询客户端： select * from nls_instance_parameters 客户端字符集与服务端字符集不一致就会出现乱码等问题 3.会话字符集： select * f
新建的服务器，上传图片传不上去？500错误
weixin_42165130的博客
02-19 1863
新搭建的服务器，传图片时候报错500,。 因为是在本地已经建好的项目上传到服务器，所以在本地是可以上传的。那就排除了是图片大小，格式，代码的错误问题。那就只剩下是权限问题了，但是，不要只给最顶层的777，要给你的上传路径的所有文件夹都777。...
安装SQL Server时，提示VS Shell 安装失败，退出代码为 1638。
weixin_34025151的博客
10-25 1397
在安装SQL Server时，提示“安装 Microsoft Visual C++ 2015 Redistributable 时出错VS Shell 安装失败，退出代码为 1638”。 原因：是由于你系统里已经安装了高于Microsoft Visual C++ 2015 Redistributable的版本，比如，在安装VS2017时，会默认安装Microsoft Visual C++ 2017...
el-image标签绑定点击事件后没有有用
MBAI的博客
03-19 3429
引用element ui 的图片组件在上面直接绑定点击事件发现不生效，百度了发现这种原生的组件需要添加.native； @click（没用） @click.native（有用） 参考链接
Element-ui 图片预览滚动时候，禁止遮罩层后面的内容滚动
shadow_yi_0416的博客
12-01 2186
需求一：不通过点击图片进行预览，通过点击按钮预览图片。且当前页面没有图片 html代码：按钮 <el-button @click="showImg"> 点击按钮预览图片</el-button> html代码：图片 图片的代码由于element-ui的图片预览组件，要求，图片的属性不能是display：none，且透明度不能为0； 因此，我想其实可以设置一个宽度近乎没有值。 <el-image ref="preview" style="wid
img标签禁止图片拖动
努力中的小曾
08-09 2191
img标签禁止图片拖动 场景是在img标签上 能把里面的图片拖拽出来， 体验不友好，添加这个css样式 pointer-events: none; 图片场景：
【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-14 1651
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 <template> <el-image class="image-with-border" src="your-image-src"></el-image> </template> <style> .image-with-border { border: 2px solid #ccc; } </style> ``` 在上面的示例中，我们给 el-image 添加了一个名为 "image-with-border" 的 class，然后在 CSS 中设置了该 class 的 border 样式。你可以根据需要调整边框的样式和宽度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值