VUE Cli 项目 Element-UI Carousel 走马灯 轮播图 自适应浏览器高宽

<template>
  <div id="Dynamic" :style="{width:fullWidth+'px',height:fullHeight+'px'}">
    <!-- 轮播图区域 -->
    <div class="banner_div">
      <el-carousel :interval="interval" trigger="click" :height="bannerHeight+'px'">
        <el-carousel-item v-for="it in imgList" :key="it.id">
            <el-row :style="{width:fullWidth+'px',height:fullHeight+'px'}">
                <el-col :span="24">
                    <img ref="bannerimg" :src="it.imgUrl" :alt="it.id" @load="imgLoad" :style="{width: fullWidth+'px',height:fullHeight+'px'}">
                </el-col>
            </el-row>
        </el-carousel-item>
    </el-carousel>
    </div>
    <!-- 其他区域 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullWidth:document.documentElement.clientWidth,
      fullHeight:document.documentElement.clientHeight,
      bannerHeight:"",
      bannerWidth:"",
      //轮播图切换时间
      interval:3000,
      imgList: [
        { id: 1, imgUrl: require('../../assets/fangqian/swiper01.jpg') },
        { id: 2, imgUrl: require('../../assets/fangqian/swiper02.jpg') },
        { id: 3, imgUrl: require('../../assets/fangqian/swiper03.jpg') },
        { id: 4, imgUrl: require('../../assets/fangqian/swiper04.jpg') }
      ]
    }
  },
  mounted(){
    this.resetDocumentClientHeight()
    this.imgLoad();
    window.addEventListener('resize',() => {
        this.imgLoad();
    },false)
  },
  methods: {
    imgLoad(){
      console.log()
        this.$nextTick(()=>{
            let ref = this.$refs
            this.bannerHeight=ref.bannerimg && ref.bannerimg.length ? ref.bannerimg[0].height:'';
            this.bannerWidth=ref.bannerimg && ref.bannerimg.length ? ref.bannerimg[0].width:'';
        })
    },
    resetDocumentClientHeight(){
      var _that=this;
      _that.fullWidth=document.documentElement.clientWidth;
      _that.fullHeight=document.documentElement.clientHeight-60;
      _that.bannerHeight=_that.fullHeight
      _that.bannerWidth=_that.fullHeight
      window.onresize=()=>{
        _that.fullWidth=document.documentElement.clientWidth;
        _that.fullHeight=document.documentElement.clientHeight-60;
      }
    }
  }
}
</script>

<style lang="less" scoped>
#Dynamic{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  .banner_div{
    .el-row{
      padding: 0;
    }
  }
}
</style>