关于element框架的el-image点击后，页面出现卡死等情况的解决方式

最新推荐文章于 2024-06-24 16:17:18 发布
最新推荐文章于 2024-06-24 16:17:18 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： vue组件化 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a153052/article/details/106136941
版权

当el-image标签被添加时，页面的body就会自动添加style属性
在这里插入图片描述
所以我们绑定一个点击事件删除样式就可以了

<el-image style="width: 100px; height: 100px" :src="scope.row.logo" fit="scale-down" @click="cancelStyle()"/>


cancelStyle() {
        document.body.style = null
 },
前端打字员
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
qq_44552416的博客
02-27 1165
需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。
element 的 el-image 导致路由跳转的时候 会造成跳转路由时页面卡住，无法上下滚动
weixin_44108953的博客
08-13 771
点击el-image图片body会被加上style =“ overflow：hidden;”导致原页面和跳转的页面滚动不了 单纯的记录一下出现的问题 解决方法： 1、不用el-image 直接用回img标签 2、对element组件的版本进行更新，2.13.1已经修复该问题 3、看脸的是否成功，对兄弟元素的container添加点击跳转方法，对跳转页面添加监听方法 这种时候哪怕div里面有el-image 也有一定几率能在跳转页面进行滚动 但是不小心点了图片，加上了overflow，...
element-UI中对el-image添加下载按钮 点击事件传参
最新发布
m0_60831453的博客
06-24 146
【代码】element-UI中对el-image添加下载按钮 点击事件传参。
el-image打开预览弹窗第一张不显示问题
qq_43251098的博客
07-20 1395
今天本来想直接用引入element内部隐藏的el-image-viewer预览图片组件，在谷歌浏览器没有问题，但在ie浏览器中（10、11）页面加载不出来，于是还是打算采用api里面的el-image图片组件，但是当时没有太注意，直接把src删掉了，又或者src赋值的空值，导致el-image打开预览弹窗第一张不显示问题。 官方源码： <div class="demo-image__preview"> <el-image style="width: 100px; hei
element-ui中el-image加载图片自定义loading
dabaooooq的博客
11-24 2606
element-ui中el-image加载图片自定义loading
el-image标签绑定点击事件后没有有用
MBAI的博客
03-19 3594
引用element ui 的图片组件在上面直接绑定点击事件发现不生效，百度了发现这种原生的组件需要添加.native； @click（没用） @click.native（有用） 参考链接
element-UI中的el-image加载图片自定义加载动画
v5666666的博客
09-29 7566
前面都有 在这个里面 简书 连接地址自行观看 拿到 在加载前和加载中是一个类名为el-image__placeholder的div标签，在加载后和加载出错后分别是一个div和img标签 .el-image__placeholder 是加载出图片前 显示的 可以加一个 loading 的图片 这里有loading地址 也可以用 c3 自己写一个 <style> /* 加载前 */ .el-image__placeholder { background: url('./loadingI
点击按钮展示图片（ui组件el-image）
Zz_Qdm的博客
10-12 781
【代码】点击按钮展示图片（ui组件el-image）
在数据加载时加入 Element-UI 的 Loading 组件
聪明不喝牛奶的博客
07-03 811
在数据加载时加入 Element-UI 的 Loading 组件 在开发过程中，小伙伴们一定都遇到过当你在一个页面跳转到数据详情页面的时候，发现这个数据量特别大的时候，页面在加载数据的时候需要很长一会的时间，跳转过去的时候会出现白屏不显示，这样就会显得非常的难受，会给用户造成体验感不好的错觉，那么怎么样能够更加平稳的过度过去呢？我翻看了elementUI 的手册 看到了loading 这个组件，可以完美的解决我们上述的问题，是页面跳转的时候显得更加的顺滑，增强用户的体验！ 废话不说，开整！ created
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
ElementPlus 源码学习之 el-image 的基本实现思路
qq_39559879的博客
04-05 6385
el-image 的基本功能有： 加载中占位 加载失败占位 加载成功显示图片 图片懒加载 先考虑加载占位的情况，我们不难发现加载有成功、失败、加载中这三种状态，由于加载成功这个状态可以视为其他两种状态的排除，所以实际上我们只需要定义两个状态： // 默认为加载中状态 loading = ref(true); // 默认加载没有出错 error = ref(false); 然后提供插槽让用户可以自定义加载中和出错的图片占位： <template> <slot v-if="load
img使用object-fit:cover属性，导致页面滚动卡顿
weixin_57526694的博客
06-29 1534
项目线上运行发现只要使用object-fit:cover属性且图片质量大的时候，界面卡顿严重，滚动条滚动卡顿非常影响用户体验。经过各方排查最终发现一个解决方案是在元素上新增样式属性transform: translate3d(0, 0, 0)可以有效解决。...
vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动
duduya9527的博客
12-04 914
vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动。按f12，我们在元素版面观察，发现在点击图片之后，body标签上多出了style="overflow: hidden;经过测试，发现两种解决办法。
elementUI中的el-image 加载失败原因和解决方案
热门推荐
xiaoyuer_2020的博客
03-07 2万+
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新： 解决办法： 1.给:src设置默认值，避免图片加载失败的情况 2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载 3.vue项目error方法绑定once，为避免同一个失败链接无限触发error（加载失败后再次请求图片的方法） ...
分析多次添加指标造成卡顿的问题及解决方法
weixin_42189297的博客
01-06 228
当点击添加指标按钮会执行， loopFormSchema，每次包含8个对象的数组，循环8次每次触发appendSchemeaByfield， 执行完方法之后触发getSchema 该方法中执行for of 循环，且每次循环是循环整个页面的components， 即如果当前100个components，然后新增8个，那么第一个在getShema中循环101次，第二个在getShenma循环101次，执行完成需要循环101+102+103+…108 = 800+，就会很卡 ...
element中el-image 点击富文本放大效果
03-31
要实现在点击富文本中的图片时进行放大效果，可以使用以下方法： 1. 在富文本中插入 el-image 组件，设置好图片的路径和大小等属性。 2. 在 el-image 组件上绑定 click 事件，当用户点击图片时触发该事件。 3. 在 click 事件中，使用 Element UI 的 Dialog 组件创建一个弹窗，将 el-image 组件放入其中。 4. 在弹窗中设置 el-image 组件的宽度和高度为 100%，使其铺满整个弹窗。 5. 在弹窗中添加关闭按钮，点击该按钮时关闭弹窗。 以下是示例代码： ```html <template> <div> <div v-html="richText" @click="handleClick"></div> <el-dialog :visible.sync="dialogVisible" width="80%"> <el-image :src="currentImageUrl" style="width: 100%; height: 100%"></el-image> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { richText: '<p>这里是富文本内容<img src="https://example.com/image.jpg"></p>', dialogVisible: false, currentImageUrl: '' } }, methods: { handleClick(event) { const target = event.target if (target.tagName === 'IMG') { this.dialogVisible = true this.currentImageUrl = target.src } } } } </script> ``` 在上面的代码中，我们首先在富文本中插入了一个 el-image 组件，然后在其上绑定了 click 事件。当用户点击图片时，我们将弹出一个 Dialog 组件，其中包含了一个 el-image 组件，并将该图片的路径传递给了 el-image 组件。此外，我们还在 Dialog 组件中添加了一个关闭按钮，点击该按钮时可以关闭弹窗。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值