基于element-ui 卡片化Carousel组件，用vue仿写一个一模一样的功能

1. 安装element-ui: `npm install element-ui --save`

2. 引入element-ui和样式文件

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建Carousel组件

<template>
  <el-carousel :interval="interval">
    <el-carousel-item v-for="(item, index) in list" :key="index">
      <div class="card">
        <div class="card-img">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="card-info">
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
          <a :href="item.link" target="_blank">了解更多</a>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'MyCarousel',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    interval: {
      type: Number,
      default: 3000
    }
  }
}
</script>

<style scoped>
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 300px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-img {
  height: 120px;
  width: 100%;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

.card-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.card-info {
  padding: 16px;
  text-align: center;
}

.card-info h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.card-info p {
  font-size: 14px;
  margin-bottom: 10px;
  color: #999;
}

.card-info a {
  display: inline-block;
  font-size: 14px;
  color: #409eff;
}
</style>

4. 在父组件中使用Carousel组件

<template>
  <my-carousel :list="list" />
</template>

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

export default {
  components: {
    MyCarousel
  },
  data() {
    return {
      list: [
        {
          imgUrl: 'https://picsum.photos/300/200/?image=10',
          title: 'Card Title 1',
          desc: 'Card Description 1',
          link: 'https://www.example.com'
        },
        {
          imgUrl: 'https://picsum.photos/300/200/?image=20',
          title: 'Card Title 2',
          desc: 'Card Description 2',
          link: 'https://www.example.com'
        },
        {
          imgUrl: 'https://picsum.photos/300/200/?image=30',
          title: 'Card Title 3',
          desc: 'Card Description 3',
          link: 'https://www.example.com'
        },
        {
          imgUrl: 'https://picsum.photos/300/200/?image=40',
          title: 'Card Title 4',
          desc: 'Card Description 4',
          link: 'https://www.example.com'
        }
      ]
    }
  }
}
</script>