vue+element-ui轮播图自适应

1.vue页面部分
2.javascript部分

<script>
export default {
  data () {
    return {
      // 图片地址数组
      img_list: [
        '/static/index/轮播1.png',
        '/static/index/轮播2.png'
      ],
      // 图片父容器高度
      bannerHeight: 1000,
      // 浏览器宽度
      screenWidth: 0
    }
  },
   methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度  
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
  },
  mounted () {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth
    this.setSize()
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.setSize()
    }
  }
}
</script>

3.css部分