elementui carousel

ElementUI Carousel 基础用法

ElementUI 的 Carousel 组件用于创建轮播图，常用于展示图片或内容幻灯片。以下是一个基本示例：

<template>
  <el-carousel :interval="3000" type="card" height="200px">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'CarouselDemo'
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
</style>

Carousel 属性配置

interval 属性控制自动切换的时间间隔，单位为毫秒。设置为 0 时不会自动切换。

indicator-position 属性可设置指示器的位置，可选值有 outside/none。

arrow 属性控制切换箭头的显示时机，可选值有 always/hover/never。

<el-carousel 
  :interval="5000" 
  indicator-position="outside" 
  arrow="hover"
  height="300px">
  <!-- carousel items -->
</el-carousel>

自定义指示器和箭头

通过 scoped slot 可以自定义指示器和箭头样式。使用 prev 和 next 插槽自定义箭头，使用 indicator 插槽自定义指示器。

<el-carousel>
  <template #prev="{ go }">
    <div class="custom-arrow left" @click="go">
      <i class="el-icon-arrow-left"></i>
    </div>
  </template>
  <template #next="{ go }">
    <div class="custom-arrow right" @click="go">
      <i class="el-icon-arrow-right"></i>
    </div>
  </template>
  <template #indicator="{ index }">
    <div class="custom-indicator">
      {{ index + 1 }}
    </div>
  </template>
</el-carousel>

动态内容加载

Carousel 支持动态加载内容，结合 v-for 指令可以渲染数组数据。

<el-carousel>
  <el-carousel-item 
    v-for="(item, index) in carouselItems" 
    :key="index">
    <img :src="item.image" :alt="item.title">
    <div class="carousel-caption">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </div>
  </el-carousel-item>
</el-carousel>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { image: 'image1.jpg', title: '标题1', description: '描述1' },
        { image: 'image2.jpg', title: '标题2', description: '描述2' }
      ]
    }
  }
}
</script>

响应式设计技巧

结合 CSS 媒体查询可以创建响应式轮播图，适应不同屏幕尺寸。

@media (max-width: 768px) {
  .el-carousel {
    height: 150px !important;
  }
  .el-carousel__item h3 {
    font-size: 12px;
    line-height: 150px;
  }
}

事件处理

Carousel 提供了 change 事件，可以在幻灯片切换时执行特定操作。

<el-carousel @change="handleChange">
  <!-- carousel items -->
</el-carousel>

<script>
export default {
  methods: {
    handleChange(current, prev) {
      console.log(`从 ${prev} 切换到 ${current}`)
    }
  }
}
</script>

性能优化建议

对于包含大量图片的轮播图，建议使用懒加载技术。ElementUI 的 Image 组件支持懒加载功能。

<el-carousel-item>
  <el-image 
    :src="item.image" 
    lazy
    :preview-src-list="[item.image]">
  </el-image>
</el-carousel-item>