vue+elementUI框架 实现走马灯图片高度自适应

vue+elementUI框架 实现走马灯图片高度自适应

element UI自身的carousel组件容器的高度是固定写死的，就算把image图片的宽度设置100%，它会随着浏览器屏幕的宽度等比例缩小到设置的最小宽度,但是因为外面的容器已经写死了一个高度(150px)，这样随着浏览器宽度变小,底部的话就会留有一片空白区域,如下,正常的高度应该有红线区域那么高

网上搜索了一些方法,基本思路都是监听浏览器窗口大小然后给carousel组件容器的高度赋值

总结了一下,应用到我自己的案例里面,亲测有效

<!-- tempate部分 -->
<el-carousel trigger="click" :height="imgHeight">
  <el-carousel-item v-for="(item,index) in bannerList" :key="index">
    <img ref="imgH" :src='item.imgSrc' style="width:100%;" alt="" @load="imgLoad">
  </el-carousel-item>
</el-carousel>

<!-- data部分 -->
data(){
	return {
		imgHeight:'0',   
		bannerList:['xxx']  
	}
},
methods:{
	imgLoad(){
      this.$nextTick(()=>{
        this.imgHeight = `${this.$refs.imgH[0].height}px`;
        // console.log(this.imgHeight)
      })
    }
},
mounted () {
    this.imgLoad();
    window.addEventListener("resize",this.imgLoad,false);
  },
  destroyed(){
     window.removeEventListener("resize",this.imgLoad,false);
  },

tip:
1:组件的img标签上要加上@load='imgLoad’方法,确保首次进入页面时在图片加载完成后能正确拿到图片的高度并进行渲染
2:主页切换到其他页面后，浏览器窗口大小变化时控制台会报错,

这里是因为在全局的window上添加了事件监听,解决方法是:离开(即销毁)页面时要移除事件监听,即执行destoryed里面的代码
参考链接1: https://blog.csdn.net/wmklalala/article/details/105300695?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase.
参考链接2: https://blog.csdn.net/xiaoqiangbigbrother/article/details/80905685?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase.