使用el-carousel默认高度300px问题

1、使用走马灯进行轮播

<el-row>
  <el-col :span="24">
    <el-carousel style="padding: 0;" id="el-carousel">
      <el-carousel-item v-for="(item, index) in shouyelist" :key="index">
        <el-image :src="item" style="width: 100%;transform: scaleY(1)">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </el-carousel-item>
    </el-carousel>
  </el-col>
</el-row>

2、在el-carousel里面，会有一个样式el-carousel__container，默认高度300px;，因此在浏览器大小有变动的时候，导致图变形等情况出现。需要修改一下

.el-carousel__container{
  /*height: 456px;*/
  height: 100% !important;
}

3、增加变形的JS控制

// 在methods里面
setSize1: function() {
  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  this.screenWidth = width;
  //图片                高 / 宽  700 / 1920
  this.bannerHeight = 456 / 1920 * this.screenWidth - 50
  document.getElementById('el-carousel').style.height = this.bannerHeight + 'px';

},
setSize: function() {
  this.bannerHeight = 456 / 1920 * this.screenWidth - 50
  document.getElementById('el-carousel').style.height = this.bannerHeight + 'px';
}

mounted() {
  this.setSize1();
  const that = this;
  //监听浏览器窗口大小改变
  window.addEventListener('resize', function() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    that.screenWidth = width;
    that.setSize();
  }, false);

}

4、搞掂，收工!!

欢迎大家关注我，it4eye!!!!