Element-ui的Carousel走马灯组件动态渲染高度

在前端vue项目开发中经常会用到走马灯的场景，然而在采用Element-ui的情况下，el-carousel走马灯组件有一个默认的固定高度300px。如下所示：

.el-carousel__container {
    position: relative;
    height: 300px; // element-ui 默认高度
}

这样会导致网页的全屏的banner被压缩或拉伸，变形十分难看，在一个认真的切图仔眼里是无法容忍的。然而业务方在使用的时候没有按照相关图片规范来上传符合规格的图片大小。所以我们需要在程序中开发根据业务后台上传的图片大小来动态渲染走马灯的高度。
下面我们来看看具体的代码实现：

<template>
 <!--banner 组件-->
	<el-carousel
        :height="imgHeight"
        style="width:100%;"
        indicator-position="none"
        :arrow="bannerList.length>1 ? 'hover' : 'never'"
        :loop="true"
        :autoplay="true"
      >
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
          <template v-if="item.jumpType">
            <el-image ref="image"
              style="width:100%;"
              :src="item.image"
              fit="fit"
              class="banner-img" />
          </template>
        </el-carousel-item>
      </el-carousel>
</template>
<script>
export default {
  props:{
    bannerList:{
      type: Array,
      require: false,
      default: () => []
    }
  },
  data(){
    return {
      imgHeight: ''
    }
  },
  mounted(){
    this.imgLoad();
    // 监听窗口变动大小计算banner高度
    window.addEventListener("resize", () => {
      this.imgLoad()
    });
  },
  methods:{
    // 获取图片的实际长度和宽度
    getImgAttr (url, callback) {
        let img = new Image()
        img.src = url
        if (img.complete) {
            callback(img.width, img.height);
            // console.log(img.width, img.height, 'img.width, img.height')
        } else {
            img.onload = function () {
                callback(img.width, img.height)
                img.onload = null
            }
        }
    },
    imgLoad() {
      this.$nextTick(function() {
        // 定义页面初始的走马灯高度, 默认以第一张图片高度
        if (this.bannerList.length) {
            this.getImgAttr(this.bannerList[0].image, (width, height) => {
                // 获取屏宽计算图片容器高度
                let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
                this.imgHeight = height / width * screenWidth + 'px'
                // console.log(this.imgHeight, 'this.imgHeight')
            })
        }
      });
    },
  }
}
</script>

写到这儿基本上解决了图片变形问题。注意：组件的mounted钩子中监听屏幕大小改变，在组件销毁时监听尽可能的要移除事件监听，这里程序与文章相关不大省略掉了。