导致的bug 页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看不到页面底部的内容。 解决方法 el-image的父级元素阻止事件冒泡 不使用el-image标签 element-ui 降版至2.10以下
2,使用div遮罩在图片上层,这是最麻烦,也是显得最蠢的方法,不推荐!解决方法:其实点击图片,滚动条消失的bug是因为点击图片后,会给body添加一个[overflow: hidden]属性,导致滚动条消失,解决方法很简单,只要在全局css中,给body添加一个[overflow: auto]的属性,并且强制优先级为最优先[!important],也就是【overflow: ...
2.10及其以下没有这个问题,主要是点击图片预览(全屏预览锁定滚动条)和点击图片跳转(路由改变预览被覆盖)冲突造成的;解决方法: 1、降低版本 2、事件捕获(跳转加在el-image的父级,到父级截至,不往下传播) 3、外加div遮挡图片(就是不让点击图片,点击遮挡div跳转); 后两种我没测,理论上推测,有兴趣可以试试 4 、...
clickHandler:functionclickHandler(){// prevent body scrollprevOverflow=document.body.style.overflow;document.body.style.overflow='hidden'this.showViewer=true;} 导致的bug页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看不到页面底部的内容。 解决方法 el-image的父级元素阻...
导致的bug 页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看不到页面底部的内容。 解决方法 el-image的父级元素阻止事件冒泡 不使用el-image标签 element-ui 降版至2.10以下
显示大图预览后发现鼠标上下滚动放大缩小图片时,遮罩后面的页面如果有滚动条,也会跟着滚动,体验感不好; 解决如下:可以写两个方法,在打开预览后调用下面方法禁止页面滚动,关闭预览后打开页面滚动。 // 停止页面滚动stopMove(){constm=(e)=>{e.preventDefault()};document.body.style.overflow='hidden';document.addE...
显示大图预览后发现鼠标上下滚动放大缩小图片时,遮罩后面的页面如果有滚动条,也会跟着滚动,体验感不好;解决如下:可以写两个方法,在打开预览后调用下面方法禁止页面滚动,关闭预览后打开页面滚动。 // 停止页面滚动 stopMove () { const m = (e) => { e.preventDefault() }; document.body.style.overflow = '...
使用方向键缩放时页面不会滚动 What is actually happening? 使用方向键缩放时页面会滚动 👍 1 element-bot changed the title [Bug Report] el-image 的 preview 在使用方向键↑↓进行缩放时,建议提供屏蔽页面的滚动条方法。 When the preview of [Bug Report] el-image scales with the direction key_, it...
同样的路径,用img可以显示,而用el-image显示不出来? img代码: 原因 使用el-image时,图片地址需require引入 。 解决办法 <el-image :src="require('@/assets/images/manualPic/login.png')" fit="fill"></el-image> fit的属性值如下:fill / contain / cover / none / scale-down 感谢您的阅读,如果...
导致的bug 页面上有图片上传按钮,点击上传图片之后发现页面无法向下滚动,body标签的溢出被隐藏,看不到页面底部的内容。 解决方法 el-image的父级元素阻止事件冒泡 不使用el-image标签 element-ui 降版至2.10以下