<el-carousel v-else :height="height + 'px'">
<el-carousel-item v-for="item in list" :key="item">
<img
ref="height1"
@load="imgLoad"
:src="require('@/assets/iot_images/' + item + '.svg')"
alt=""
/>
</el-carousel-item>
</el-carousel>
javascript
data() {
return {
list: ["gaikuangbanner1", "gaikuangbanner2", "gaikuangbanner3"],
height: "",
};
},
mounted() {
this.imgLoad()
window.addEventListener('resize',()=>{
this.height = this.$refs.height1[0].height
this.imgLoad()
})
},
methods: {
imgLoad(){
var _that = this
this.$nextTick(()=>{
_that.height = _that.$refs.height1[0].height
_that.$emit('style1',_that.height)
})
}
},
css
img {
width: 100%;
border-radius: 6px;
}
父组件
<div class="right-2" :style="'flex: 0 0 ' + style + 'px'">
<Carousel @style1="style1"></Carousel>
</div>
data() {
return {
style: "143",
};
},
methods:
{
style1(val) {
this.style = val;
}
}