图片随浏览器调整宽高；iview 轮播图图片重叠；iview tabs 高度互相影响；vue this问题；...

最新推荐文章于 2023-12-22 11:07:02 发布

转载

最新推荐文章于 2023-12-22 11:07:02 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hao-1234-1234/p/11046117.html

文章标签：

#javascript #ViewUI

本文主要介绍了在Vue项目中遇到的图片随浏览器窗口大小调整宽高、Iview轮播图图片重叠、Iview tabs组件高度互相影响以及`this`指向问题的解决方案。在轮播图问题上，通过监听窗口resize事件动态改变图片高度，并避免使用loop属性以防止图片叠加。对于单张图片的响应式设计，可以通过计算属性实现。对于tabs组件，通过特定CSS设置解决了高度互相影响的问题，同时指出v-show在Tab-pane中不如v-if适用的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、图片随浏览器调整宽高； iview 轮播图图片重叠问题；

在data 中定义变量： imgHeight：300

通过在vue的mounted中，使用 window.onresize 监听浏览器变化，动态改变imgHeight大小。设置图片样式 style="height:inherit;width:auto;"

发现一个问题：滚动一个轮回后发现，图片会出现叠加！！！

解决：删除 loop属性，关闭循环播放；

核心原因：loop 的情况下（尽管loop默认为false）会记忆上次浏览器调整时的图片，滚动一个轮回后html会同时出现两个图片！

                                        <Carousel loop  v-bind:height="imgHeight+'px'" v-model="carouselValue"  style="text-align:center;">
                                            <div v-for="item in imgData" >
                                                <Carousel-Item>