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

这篇具有很好参考价值的文章主要介绍了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>