Vue项目中【封装复用】使用elementUI中的Carousel 走马灯实现轮播图效果

简述：

在项目中，使用轮播的地方有多处，所以做了一个简单的封装
效果如Carousel 走马灯实现轮播图效果一致

封装组件

子组件

<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="无图片"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: "Carousel",
//接收来自父组件的数据
    props: {
      // 轮播图宽度
      width: {
        type: Number,
        default:0
      },
      height: {
        type: String,
        default: '400'
      },
      // 相邻两张图片切换的间隔时间
      interval: {
        type: Number,
        default: 2000
      },
        //图片宽
      widthImage:{
        type: Number,
        default: 100
      },
      //图片高
      heightImage:{
        type: Number,
        default: 100
      },
      // 轮播图路径数组
      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>