参考了大神的文章:
https://blog.csdn.net/qq_40942490/article/details/109842331
我手写出来了。代码如下:
<div class="home-middle-top">
<el-carousel trigger="click" :height="bannerHeight+'px'">
<el-carousel-item v-for="item in imgUrls" :key="item.id">
<el-row>
<el-col :span="24" class="banner_img">
<img ref="bannerHeight" :src="item.idView" class="bannerImg" @load="imgLoad"/>
</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
</div>
data() {
return {
showIndex: true,
bannerHeight:'',
lis:[
"11",
"22"
],
imgUrls:[
{id:0,idView:require('./../../public/static/images/index-banner.jpg')},
{id:1,idView:require('./../../public/static/images/index-banner.png')},
]
}
},
methods: {
imgLoad(){
this.$nextTick(()=>{
this.bannerHeight=this.$refs.bannerHeight[0].height
console.log("this.$refs.bannerHeight[0].height",this.$refs.bannerHeight[0].height)
})
},
mounted() {
this.init()
this.imgLoad()
window.addEventListener('resize',()=>{
this.bannerHeight=this.$refs.bannerHeight[0].height
this.imgLoad()
})
}
.home-middle-top {
height: 42%;
overflow: hidden;
/*margin-bottom: 10vh;*/
background-color: red;
}
.home-middle-bottom {
height: 52%;
margin-top: 3%;
}
.home-middle-top img {
display: block;
width: 100%;
height: 100%;
}
.bannerImg {
position: relative;
left: 50%;
transform: translate(-50%);
}