一早上的时间全用来研究这个了,保证是比较好的方式
<--html部分-->
<el-carousel :interval="2000" arrow="always" style="padding-top: 6vh;" :height="bannerH+'px'">
<el-carousel-item v-for="(bitem,bindex) in bannerdata" :key="bindex">
<div style="color: #000000;text-align: center;overflow: hidden;width: 100%;">
<img style="width: 100%; height: auto;" class="bannertt" :src="bitem.img" >
</div>
</el-carousel-item>
</el-carousel>
<--script部分-->
new Vue({
el: '#app',
data: function() {
return {
bannerH:this.setBannerH1,
}
},
methods: {
setBannerH(){
this.bannerH=document.getElementsByClassName("bannertt")[0].height
},
setBannerH1(){
var bwidth=document.getElementsByClassName("bannertt")[0].width;
var bheight=document.getElementsByClassName("bannertt")[0].height;
var ssss=document.body.clientWidth;
this.bannerH=ssss*(bheight/bwidth);
},
}
mounted(){
this.setBannerH1()//初始值根据图片的缩放比率和屏幕大小来定,不然走马灯开始时候就会默认一个值
window.addEventListener('resize',()=>{
this.setBannerH()
},false)
}
})