优化el-image点击事件导致页面滚动异常情况的修复方案
发布时间
阅读量：
阅读量
问题描述
在使用 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 = 全部评论 (0)
还没有任何评论哟~