xiaoshi_system/src/views/home/components/carousel.vue

<template>
  <div class="height_100">
    <el-carousel :interval="4000" :height="height+'px'">
      <el-carousel-item v-for="item in srcList" :key="item.src" >
        <el-image :src="require('@/assets/' + item.src)" class="medium"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      srcList: [
        { src: 'lun1.jpg' },
        { src: 'lun2.jpg' },
        { src: 'lun3.jpg' },
      ],
      height:0
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getHeight()
    window.addEventListener('resize',this.getHeight)
  },
  methods: {
    getHeight(){
      var offsetWidth = document.body.clientWidth
      this.height = (5 / 16) * offsetWidth
    }
  },
  deactivated(){
    window.removeEventListener('resize',()=>{})
  }
};
</script>
<style lang="scss" scoped>
  .medium {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>