vue使用element ui 的走马灯 时候 ，出现的图片闪烁问题

最新推荐文章于 2024-04-26 10:14:46 发布
最新推荐文章于 2024-04-26 10:14:46 发布
阅读量847 收藏
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwerdf21/article/details/124985465
版权

1.问题描述：
在使用element 走马灯时，请求接口里面的图片，鼠标第一次移上去图片会一闪而过。

2.解决：
节点上加个ref在这里插入图片描述
然后用定时器
在这里插入图片描述

初见月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue的项目使用Element ui 走马灯无法实现的问题
10-15
主要介绍了解决Vue的项目使用Element ui 走马灯无法实现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuejs在解析时出现闪烁的原因及防止闪烁的方法
10-21
主要介绍了vuejs在解析时出现闪烁的原因及防止闪烁的方法,本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
详解vue数据渲染出现闪烁问题
08-30
本篇文章主要介绍了vue数据渲染出现闪烁问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element ui 走马灯问题
jikangjian的博客
07-06 435
element走马灯
el-tabs中使用走马灯导致图片快速闪过
qq_40576178的博客
12-16 849
在el-tabs中写内容，内容使用走马灯导致切换el-tabs菜单的时候，el-tabs有图片的内容出现最后一个图片快速闪过的问题 解决方案： 在el-tabs内容中的走马灯组件上添加v-if，即可解决 <el-tabs v-model="activeName" @tab-click="topTabClick"> <el-tab-pane label="思想引领" name="思想引领"> <div class="bigConten
vue实现星光闪烁动画相关文件
04-05
vue实现星光闪烁动画相关文件
vue img标签图片加载时 闪烁
飞翔༒之翼
12-16 1623
加载时 在图片正常显示之前还是会显示加载出错的默认图片。因为此时的img_url为空 所以就在父元素 加上。初次加载闪烁 然后在父元素添加了v-cloak。
Vue中使用ElementUItable表格显示图片问题
m0_62785037的博客
06-25 2711
Vue中使用ElementUItable表格显示图片问题
关于el-upload组件自动上传，添加图片时图片会弹一下的问题
l5410的博客
06-13 1079
在使用el-upload上传图片时，遇到了自动上传时会出现图片闪一下的问题。
Element上传组件监听fileList导致图片闪烁
qsya的博客
07-12 1411
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客 3 篇
Vue + Element UI图片上传控件使用详解
10-16
主要为大家详细介绍了Vue + Element UI图片上传控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue elementui el-table 表格里边展示四分位图
Z18834071903的博客
04-25 1094
vue elementui el-table 表格里边展示四分位图
Element-plus使用记录
IT菜鸟
04-24 178
Element-plus使用中遇到的问题与解决方案。
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 220
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
vue elementui 动态追加下拉框、输入框
最新发布
Z18834071903的博客
04-26 479
vue elementui 动态追加下拉框、输入框
vue3去掉el-table底部白色边框
qq_52959651的博客
04-23 318
加入下面这一行代码就行了，我用的是less。
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等
前端技术
04-23 659
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等
Vue使用Element-ui走马灯功能动态改变图片和容器大小
06-02
要实现Vue使用Element-ui走马灯功能动态改变图片和容器大小，可以按照以下步骤进行： 1. 在Vue中引入Element-ui的Carousel组件，并在template中使用。 2. 在data中定义图片列表和容器大小。 3. 在mounted生命周期中获取容器的宽度，以便动态调整图片大小。 4. 在methods中定义一个函数，用于动态改变容器大小。 5. 在template中使用v-bind指令将容器大小绑定到Carousel组件上，并使用v-for指令循环渲染图片。 下面是示例代码： ``` <template> <el-carousel :height="containerHeight"> <el-carousel-item v-for="(item, index) in imgList" :key="index"> <img :src="item.src" :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"> </el-carousel-item> </el-carousel> </template> <script> export default { data() { return { imgList: [ { src: 'https://xxx.com/1.jpg' }, { src: 'https://xxx.com/2.jpg' }, { src: 'https://xxx.com/3.jpg' }, ], containerWidth: 0, containerHeight: 300, // 初始化高度，可根据需求设置 imgWidth: 0, imgHeight: 0, } }, mounted() { this.containerWidth = this.$el.clientWidth this.setImgSize() window.addEventListener('resize', this.setImgSize) }, beforeDestroy() { window.removeEventListener('resize', this.setImgSize) }, methods: { setImgSize() { this.containerWidth = this.$el.clientWidth this.imgWidth = this.containerWidth this.imgHeight = this.containerHeight }, }, } </script> ``` 在上面的代码中，我们使用了v-bind指令将容器高度绑定到Carousel组件上，并使用v-for指令循环渲染了图片。在mounted生命周期中，我们获取了容器的宽度，并在setImgSize函数中动态调整了图片的大小。同时，我们还添加了一个resize事件监听器，以便在窗口大小改变时重新计算图片大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值