vue2自己封装element-ui的Carousel组件

可以尝试以下步骤来封装一个基于 Element UI 的 Carousel 组件：

1. 安装 Element UI：

npm i element-ui -S

2. 创建 Carousel 组件：

<template>
  <el-carousel :interval="interval" :height="height">
    <el-carousel-item v-for="(item, index) in items" :key="index">
      <img :src="item.src" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { ElCarousel, ElCarouselItem } from 'element-ui'

export default {
  name: 'MyCarousel',
  components: {
    ElCarousel,
    ElCarouselItem
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    interval: {
      type: Number,
      default: 3000
    },
    height: {
      type: String,
      default: '150px'
    }
  }
}
</script>

3. 在需要使用 Carousel 的地方引入组件：

<template>
  <my-carousel :items="items" :interval="3000" :height="'300px'"></my-carousel>
</template>

<script>
import MyCarousel from './MyCarousel.vue'

export default {
  name: 'MyPage',
  components: {
    MyCarousel
  },
  data () {
    return {
      items: [
        { src: 'https://picsum.photos/800/400?random=1' },
        { src: 'https://picsum.photos/800/400?random=2' },
        { src: 'https://picsum.photos/800/400?random=3' },
        { src: 'https://picsum.photos/800/400?random=4' }
      ]
    }
  }
}
</script>

这样，就可以在页面中使用自己封装的 Element UI Carousel 组件了。