Vue中elementUI轮播图图片高度自适应

问题

轮播图是我们经常使用到的一个组件，element官方文档中也叫“跑马灯” el-carousel。官方示例中并没有使用图片来演示，而是用来一个150px的颜色块。将h3换成img标签即可实现轮播图片，但是如果固定高度，那么如果缩小浏览器窗口，或者使用移动设备来打开，那么固定高度就会显得非常别扭。所以必须检测浏览器宽度，来动态改变轮播图组件的宽度，即响应式。

解决

在csdn查了一下，找到了解决办法。

el-carousel组件高度绑定data中的数据：

<el-carousel :height="bannerHeight+'px'" type="card">
        <el-carousel-item v-for="item in urlList" :key="item.id">
          <img :src="item.url" alt="暂无图片">
        </el-carousel-item>
</el-carousel>

然后在mouted钩子函数中，检测浏览器宽度，如果改变，则相应的改变轮播图组件宽度，达到自适应的目的。

  mounted () {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth
    this.bannerHeight = 600 / 1550 * this.screenWidth
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
  }

轮播图片css设置：这里图片高度没有设置auto而是应该和父组件el-carousel高度一直，所以是inherit。

效果：
PC端默认宽度

移动端

原理

轮播图组件高度绑定为data中的数据。
mounted函数中检测浏览器宽度，动态改变data中的bannerHeight，从而实现改变轮播图组件的宽度。