ElementUi走马灯的自适应图片的高度

ref 有三种用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

    

       
      
        
          
            ref="bannerHeight"
            class="bannerImg"
            
            @load="imgLoad"
          />
        
      
    

窗口第一次打开，加载了imgLoad（）方法，第一次获取图片在视口中的高度，然后渲染到页面
接下来通过addEventListenner（）方法监听视口是否发生改变，如果发生改变，重新调用imgLoad()方法渲染数据到页面，这样图片高度就可以随视口改变发生改变，适应各种大小屏幕。

methods: {
    // 下面的 imgLoad 是页面渲染完成的加载方法，确保屏幕中的图片的高度第一次渲染到页面。
    imgLoad () {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
        console.log(this.$refs)
      })
    }
  },
// 下面是增加监听事件，当视口发生变化的时候，得到此时图片的高度赋值给 bannerHeight
  mounted () {
      this.imgLoad()
      window.addEventListener('resize', () => {
          this.bannerHeight = this.$refs.bannerHeight[0].height
          this.imgLoad()
      }, false)
  }

请求本地图片需加require.png