簡(jiǎn)述：

在項(xiàng)目中，使用輪播的地方有多處，所以做了一個(gè)簡(jiǎn)單的封裝
效果如Carousel 走馬燈實(shí)現(xiàn)輪播圖效果一致

封裝組件

子組件

<template>
  <!-- 輪播圖片 -->
  <div class="carousel">
    <el-carousel :height="height+'px'"  :loop="true" :interval="interval" trigger="click" arrow="always">
      <el-carousel-item :width="width+'px'" class="image" v-for="item in carouselList" :key="item.id">
        <img :src="item.url"  :width="widthImage+'%'" :height="heightImage+'%'" alt="無(wú)圖片"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: "Carousel",
//接收來(lái)自父組件的數(shù)據(jù)
    props: {
      // 輪播圖寬度
      width: {
        type: Number,
        default:0
      },
      height: {
        type: String,
        default: '400'
      },
      // 相鄰兩張圖片切換的間隔時(shí)間
      interval: {
        type: Number,
        default: 2000
      },
        //圖片寬
      widthImage:{
        type: Number,
        default: 100
      },
      //圖片高
      heightImage:{
        type: Number,
        default: 100
      },
      // 輪播圖路徑數(shù)組
      carouselList: {
        type: Array,
        default: function(){
          return [];
        }
      }
    },
    data() {
      return { };
    },
  };
</script>

<style scoped>
  .el-carousel {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .el-carousel__item {
    background-color: #99a9bf;
  }

  .image {
    height: 550px;
  }
</style>

父組件：
引用封裝好的子組件

<template>
 <Carousels :height="height" :width="1000" :carouselList="images"></Carousels>
</template>

<script>
  import Carousels from './Carousels'
export default {
    components: {
      Carousels ,
    },
  data() {
      return {
        height:'450',
       images: [{
            id: 1,
            url: require("@/assets/ad1.jpg")
          },
          {
            id: 2,
            url: require("@/assets/ad2.jpg")
          },
          {
            id: 3,
            url: require("@/assets/ad3.jpg")
          },
          {
            id: 4,
            url: require("@/assets/ad4.jpg")
          },
          {
            id: 5,
            url: require("@/assets/ad5.jpg")
          }
        ],
  }
}
    },
</script>