vue：v2.6.10
element-ui：v2.15.4
需求场景：
两列布局，使用的是el-row和el-col，视觉上左右两端对齐，页面缩放保持对齐。
存在问题：图片原本撑满容器，但是页面缩放，图片自适应大小了，但是容器会出现留白现象。
解决方案：监听resize，实时获取图片需要适配外层容器的高度，并设置外层容器高度，使得图片100%撑满容器不留白。
实现效果：
主要代码：
// 这里实现的是轮播图效果
<template>
<el-carousel :height="`${imgH}px`">
<el-carousel-item v-for="item in srcList" :key="item">
<el-image :src="item" :preview-src-list="srcList" @load="onloadImg" />
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
name: 'CCarousel',
data() {
return {
imgH: 188, // 1.外层容器高度（也就是图片撑满容器的高度），默认188
srcList: [
'/img/test-banner1.jpg',
'/img/test-banner2.jpg'
]
}
},
beforeDestroy() {
window.removeEventListener('resize', this.getResizeImgH)
},
created() {
window.addEventListener('resize', this.getResizeImgH)
},
methods: {
/**
* 2.图片加载成功，设置页面初始加载图片占据的高度（img标签可以使用var img = new Image() + img.onload = (){}获取图片高度）
* 这里$emit图片高度，是因为需要跟左侧折线图的高度保持一致，图表组件中使用watch监听this.imgH，图片高度改变同时重新计算图表高度
*/
onloadImg(e) {
this.imgH = e.target.height
this.$emit('getImgH', this.imgH)
},
/**
* 3.页面缩放，监听图片大小
* document.querySelector()，返回文档中与指定选择器或选择器组匹配的第一个Element对象
* $emit作用同上
*/
getResizeImgH() {
this.imgH = document.querySelector('.el-image__inner').offsetHeight
this.$emit('getImgH', this.imgH)
}
}
}
</script>
