核心代码
<el-carousel :height="bannerHeight+'px'" >
<el-carousel-item v-for="item in imgUrls" :key="item">
<img
ref="bannerHeight"
@load="imgLoad" style="width: 100%"
:src="item"
>
</el-carousel-item>
</el-carousel>
<script>
export default {
name: "Love",
components: { Menu },
data () {
return {
bannerHeight: "",
imgUrls: [
'https://www.guanacossj.com/media/fzy/189531609426993_.pic_hd.jpg',
'https://www.guanacossj.com/media/fzy/189521609426989_.pic_hd.jpg',
],
}
},
mounted(){
this.imgLoad();
window.addEventListener('resize',() => {
this.bannerHeight=this.$refs.bannerHeight[0].height;
this.imgLoad();
},false)
},
methods: {
imgLoad(){
this.$nextTick(()=>{
this.bannerHeight=this.$refs.bannerHeight[0].height;
console.log(this.$refs.bannerHeight[0].height);
})
},
}
}
</script>