element-ui图片切换

### 关于 Element UI 中实现图片切换

Element UI 提供了一个名为 `el-carousel` 的组件用于创建轮播图效果，这可以用来展示一系列图片并支持自动播放和手动切换功能[^1]。

#### 使用方法与示例

为了使用该组件来显示一组图片，在模板部分引入 `<el-carousel>` 和其子元素 `<el-carousel-item>` 来构建基本结构：

<template>
  <div class="carousel-container">
    <!-- 轮播图容器 -->
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in imageList" :key="index">
        <img :src="item.src" alt="" style="width: 100%;height: 100%;">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片列表数据源
      imageList: [
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' },
        { src: 'https://example.com/image3.jpg' }
      ]
    };
  }
};
</script>

上述代码展示了如何利用 `v-for` 指令循环渲染多个 `el-carousel-item` 组件实例，并为每张图片设置唯一的键值。同时设置了轮播间隔时间为4秒(`:interval="4000"`), 类型为卡片样式 (`type="card"`) 及高度固定为200像素的高度属性 (`height="200px"`)。

此外还可以通过配置其他参数来自定义轮播行为，比如是否开启自动播放、指示器位置等特性。