el-image局部显示(不全屏遮罩) 需要修改遮罩层的定位,使用绝对定位,设置遮罩层的大小,注意样式修改需要是全局样式,不能用scoped 1 2 3 4 5 6 7 8 9 .el-image-viewer__wrapper { position: absolute!important; top: 70px!important; left: 300px!important; width: calc(50% - 150px)!important; ove...
确定遮罩层的选择器或引用: 在Element UI中,el-image预览时的遮罩层通常有一个特定的类名,如.el-image-viewer__mask。你可以使用这个类名来选择遮罩层元素。 编写JavaScript代码以修改遮罩层的背景色: 一旦确定了遮罩层的选择器,你可以编写JavaScript代码来修改其背景色。这可以通过直接操作DOM元素的style属性来实现。
在Vue3+ElementPlus中,使用 el-image 和预览大图功能,点击 el-image 后预览的图片局限在原有图片(小图)内,遮罩也没有充满屏幕。 【注】使用transform: translateY(-5px);的原因是本来外面有一层div,想用 hover 时增加阴影和位移表示选中了当前div。但是在vue3中出现预览的图片和小图尺寸一样、鼠标移动时图片...
1. 显示大图预览后发现鼠标上下滚动放大缩小图片时,遮罩后面的页面如果有滚动条,也会跟着滚动,体验感不好; 解决如下:可以写两个方法,在打开预览后调用下面方法禁止页面滚动,关闭预览后打开页面滚动。 // 停止页面滚动stopMove(){constm=(e)=>{e.preventDefault()};document.body.style.overflow='hidden';document...
还有就是实现预览是点击遮罩实现关闭预览,因为组件没有实现,我希望不改变的情况下实现: let t = this; this.showViewer = true; this.$nextTick(() => { document.querySelector(".el-image-viewer__mask").onclick = function() { t.showViewer = false; ...
显示大图预览后发现鼠标上下滚动放大缩小图片时,遮罩后面的页面如果有滚动条,也会跟着滚动,体验感不好;解决如下:可以写两个方法,在打开预览后调用下面方法禁止页面滚动,关闭预览后打开页面滚动。 // 停止页面滚动 stopMove () { const m = (e) => { e.preventDefault() }; document.body.style.overflow = '...
Issue Remove Inactive [Style] [image-viewer] 在可展开的table中使用el-image组件,表格的边框出现在了图片预览遮罩层的上方 #31625 Sign in to view logs Summary Jobs issue-remove-inactive Run details Usage Workflow file Triggered via issue January 6, 2025 11:30 ...
2,使用div遮罩在图片上层,这是最麻烦,也是显得最蠢的方法,不推荐!解决方法:其实点击图片,滚动条消失的bug是因为点击图片后,会给body添加一个[overflow: hidden]属性,导致滚动条消失,解决方法很简单,只要在全局css中,给body添加一个[overflow: auto]的属性,并且强制优先级为最优先[!important],也就是【overflow:...
这么写的话预览是正常加载的,但是由于之前给html设置了-webkit-app-region: drag;,所以预览遮罩点击关闭功能会失效,关闭按钮也无法点击,只能自定义viewer给其添加-webkit-app-region: no-drag;样式,好让它表现正常。改为: <el-image :src="record.fileUrl" :preview-src-list="[fileUrl]" :hide-on-click-mo...
,{date:'2016-05-04',name:'Tom',address:'No. 189, Grove St, Los Angeles',},{date:'2016-05-01',name:'Tom',address:'No. 189, Grove St, Los Angeles',},] What is Expected? 样式正确 What is actually happening? 遮罩层叠顺序错乱 Additional...