elementui中有一个el-carousel跑马灯组件，这个组件作为滚动循环广告等来使用是非常合适的。但是在实际使用中也是有坑的，比如跑马灯的高度是通过vue组件属性props固定的。默认是300px高。然而在实际项目中，往往需要跑马灯的高度能够动态改变，来达到需要的显示效果。特别是如果跑马灯里面的item的高度比外层总的固定高度更高，那么跑马灯里面item的内容就会显示不全。

下面是跑马灯组件的实际效果:

为了解决这个高度固定不变，不能动态自适应的问题，要通过自己撸代码的方式解决。
首先需要获取到跑马灯里面的每个item元素： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
this.$nextTick(()=>{
let nodeList=document.querySelectorAll('#ca_item') //跑马灯内部item或者item中包裹组件的父div
let maxHeight=0
for (let i=0;i<nodeList.length;i++){  //获取到高度最高的一个item的高度，作为跑马灯的高
if (maxHeight<nodeList[i].offsetHeight){
maxHeight=nodeList[i].offsetHeight
}
}
if (maxHeight<350){
this.ca_height=350+'px'
}else {
   this.ca_height=maxHeight+50+'px'
}
})

在mounted()钩子函数中，每次通过for循环，获取到跑马灯中多个item中最高的一个height。用这个最高的高度来作为跑马灯的高度，这样一来，跑马灯中所有item中内容都不会超出跑马灯的最大高度。 

1
<el-carousel :interval="4000" arrow="always" :height="ca_height">

在vue中通过数据绑定，将高度值绑定到跑马灯的属性中，这样跑马灯的高度就可以实时改变。
另外，为了适应屏幕缩放带来的高度问题，需要监听onresize，每当屏幕缩放改变时，重新计算跑马灯的高度。 

1
2
3
4
5
6
7
8
9
10
11
data() {
      return {
        ca_height:'350px'
      }
    },
    mounted() {
      this.setCaItemHeight()
      window.onresize = () => {
          this.setCaItemHeight()
      }
    }

以上就是elementui中跑马灯实现高度自适应的基本思想和部分代码，可以基于这种实现思路，自己尝试一些变化。