<!--html代码块-->
<el-carousel :height="imgHeight+'px'">
<el-carousel-item v-for="item in 4" :key="item">
<img ref="imgHeight" style="width:100%;" src="img.png" mode="widthFix" />
</el-carousel-item>
</el-carousel>
<!--html代码块-->
<!--js代码块-->
<script>
export default {
return {
imgHeight: ""
},
mounted() {
var _this = this;
this.get_banner();
// 监听窗口变化,使得轮播图高度自适应图片高度
window.addEventListener("resize", () => {
this.get_banner();
},false);
},
methods: {
get_banner() {
this.bannerList = []
//获取到图片数据之后
this.$nextTick(function() {
// 获取窗口宽度*图片的比例,定义页面初始的轮播图高度 width=1400,height=520 图片的默认宽高
this.imgHeight = document.body.clientWidth*520/1400
});
},
},
destroyed(){ //切换页面后销毁监听窗口事件
window.removeEventListener("resize",this.get_banner,false);
}
}
</script>
<!--js代码块-->
element框架中的轮播图片高度自适应配置
最新推荐文章于 2024-04-01 15:01:26 发布