vue2 element ui Carousel需要给固定数值的高度,但是自己写的页面需要Carousel跟随父div的高度变化.
我们可以动态获取高度,并赋值给el-carousel height,为了避免el-carousel下的子组件渲染变形,我们先让其隐藏,获取高度后再显示出来。
<div class="homeMainr1" ref="homeMainr1">
<el-carousel ref="carousel" :autoplay="false" :height="height">
<el-carousel-item>
<div class="echartsBody2">
<north v-if="show"></north>
</div>
</el-carousel-item>
</el-carousel>
</div>
data() {
return {
height: 0,
show: false
}
},
mounted() {
this.height = this.$refs.homeMainr1.clientHeight + 'px'
this.show = false
this.$nextTick(() => {
this.show = true
})
},