vue element ui 走马灯组件Carousel高度自适应

vue yekong

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
    })
  },
喜欢