程序员scholar
  • Element-UI
  • 其他组件
scholar
2024-08-12
目录

走马灯组件 (Carousel)

# 走马灯组件 (Carousel)

Element-UI 的 Carousel 组件用于在有限空间内循环播放图片、文字等内容，常用于广告轮播、图片展示等场景。通过设置不同的属性，可以控制幻灯片的切换方式、时间间隔以及样式等。

提示

Carousel 组件官方文档：https://element.eleme.cn/#/zh-CN/component/carousel (opens new window)

image-20240811180115928

结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。

# 1. 基本用法

基本语法：使用 <el-carousel> 包裹多个 <el-carousel-item> 标签来创建一个走马灯组件。每个 <el-carousel-item> 表示一个幻灯片内容，可以包含图片、文字或其他 HTML 元素。

<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
  • 基本结构：使用 el-carousel 作为走马灯的容器，每个 el-carousel-item 是一个单独的幻灯片。
  • 间隔时间：通过 interval 属性设置自动切换的时间间隔，以毫秒为单位。
  • 切换箭头：使用 arrow="always" 属性设置切换箭头总是显示。
参数 说明 类型 可选值 默认值
height 走马灯的高度 string — —
initial-index 初始状态激活的幻灯片的索引，从 0 开始 number — 0
trigger 指示器的触发方式 string click —
autoplay 是否自动切换 boolean — true
interval 自动切换的时间间隔，单位为毫秒 number — 3000
indicator-position 指示器的位置 string outside/none —
arrow 切换箭头的显示时机 string always/hover/never hover
type 走马灯的类型 string card —
loop 是否循环显示 boolean — true
direction 走马灯展示的方向 string horizontal/vertical horizontal
方法名 说明 参数
setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
prev 切换至上一张幻灯片 —
next 切换至下一张幻灯片 —
事件名称 说明 回调参数
change 幻灯片切换时触发 当前激活的幻灯片的索引，原幻灯片的索引
参数 说明 类型 可选值 默认值
name 幻灯片的名字，可用作 setActiveItem 的参数 string — —
label 该幻灯片所对应指示器的文本 string — —

# 2. 常用示例

# 1. 基础案例

这是一个简单的走马灯，包含 4 张幻灯片，自动切换，切换间隔为 3 秒。

<template>
  <el-carousel :interval="3000">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>
1
2
3
4
5
6
7
  • 自动切换：走马灯默认会自动切换，间隔时间可以通过 interval 属性调整。

# 2. 设置初始激活的幻灯片

通过 initial-index 属性设置初始状态下激活的幻灯片。

<template>
  <el-carousel :initial-index="2">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>
1
2
3
4
5
6
7
  • 初始索引：通过 initial-index="2" 设置第三个幻灯片在初始状态下为激活状态。

# 3. 指示器和箭头的显示控制

通过 indicator-position 和 arrow 属性控制指示器和切换箭头的显示位置和时机。

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • 外部指示器：通过 indicator-position="outside" 将指示器放置在走马灯的外部。
  • 始终显示箭头：通过 arrow="always" 设置切换箭头总是显示。
  • image-20240811181903188

# 4. 垂直方向的走马灯

通过 direction 属性设置走马灯的方向为垂直方向。

<template>
  <el-carousel height="200px" direction="vertical" :autoplay="false">
    <el-carousel-item v-for="item in 3" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • 垂直方向：通过 direction="vertical" 将走马灯的方向设置为垂直。
  • 高度设置：使用 height="200px" 设置走马灯的高度。
  • image-20240811181840963

# 5. 卡片类型的走马灯

使用 type="card" 设置走马灯为卡片类型，使得相邻的幻灯片部分可见。

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

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • 卡片类型：通过 type="card" 实现卡片式的幻灯片展示。
  • image-20240811181825591

# 6. 手动切换幻灯片

通过调用 setActiveItem 方法，可以手动切换到指定的幻灯片。

<template>
  <div>
    <el-carousel ref="carousel" :interval="4000">
      <el-carousel-item v-for="item in 6" :key="item" :name="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-button @click="setActive(2)">切换到第三张</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    setActive(index) {
      this.$refs.carousel.setActiveItem(index);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  • 手动切换：调用 setActiveItem 方法可以切换到指定的幻灯片，通过 ref 获取组件实例。

# 3. 实现大图轮播

# 1. 需求分析

首先明确需求：我们需要实现一个大图轮播组件，支持自动播放、手动切换、点击图片后跳转到相应的页面，并且在鼠标悬浮在图片上时，显示指针样式（小手）。为了符合企业标准，我们需要确保代码的可维护性、可扩展性，以及良好的用户体验。

# 2. 组件选择

  • Element-UI 的 Carousel 组件：它提供了轮播图的基本功能，例如自动播放、手动切换、循环播放等，非常适合用于实现大图轮播。
  • Vue.js 的 Router：为了在点击图片时跳转到指定页面，我们使用 Vue 的路由功能。

# 3. 代码结构

  • el-carousel: 用于容纳多个轮播项（幻灯片）。
  • el-carousel-item: 表示每个幻灯片项，内部包含具体的图片内容。
  • img 标签: 用于显示图片，同时绑定点击事件用于跳转页面。

# 4. 功能实现

  • 自动轮播与手动切换: 通过 interval、arrow 等属性控制轮播图的自动播放和切换箭头的显示。
  • 点击跳转: 使用 @click 事件监听图片的点击，通过 Vue Router 实现页面跳转。
  • 样式与交互: 自定义图片样式和箭头样式，确保在不同的状态下（如悬浮、点击）有良好的视觉效果。

# 5. 完整代码实现

<template>
  <el-carousel
    ref="carousel"
    :interval="5000"
    arrow="always"
    height="400px"
    :autoplay="true">
    
    <!-- 循环渲染 Carousel 项 -->
    <el-carousel-item
      v-for="(item, index) in images"
      :key="index">
      <!-- 图片元素，绑定点击事件 -->
      <img 
        :src="item.src"
        :alt="item.alt"
        class="carousel-image"
        @click="handleImageClick(item)"
        @error="handleImageError"
      />
    </el-carousel-item>
    
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      // 图片数据数组，每个对象包含图片链接、描述和跳转链接
      images: [
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825938.jpg', alt: 'Image 1', link: '/page1' },
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825965.png', alt: 'Image 2', link: '/page2' },
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825266.jpg', alt: 'Image 3', link: '/page3' },
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825893.png', alt: 'Image 4', link: '/page4' }
      ],
      fallbackImage: 'https://via.placeholder.com/800x400?text=Image+Not+Available' // 图片加载失败时的备用图片
    };
  },
  methods: {
    // 处理图片点击事件，使用 vue-router 进行页面跳转
    handleImageClick(image) {
      if (image && image.link) {
        this.$router.push(image.link).catch(err => {
          console.error('Navigation error:', err); // 捕获并记录导航错误
        });
      }
    },
    // 处理图片加载错误
    handleImageError(event) {
      event.target.src = this.fallbackImage;
    }
  }
};
</script>

<style scoped>
/* 设置轮播图内图片的样式 */
.carousel-image {
  width: 100%;             /* 图片宽度占满容器 */
  height: 400px;           /* 固定高度 */
  object-fit: cover;       /* 保持图片比例，裁剪多余部分 */
  cursor: pointer;         /* 鼠标悬浮时显示小手状态 */
  transition: transform 0.3s ease, opacity 0.3s ease; /* 增加平滑的过渡效果 */
}

.carousel-image:hover {
  transform: scale(1.05);  /* 鼠标悬浮时放大 */
  opacity: 0.9;            /* 悬浮时略微降低不透明度 */
}

/* 自定义 Carousel 切换箭头的样式 */
.el-carousel__arrow {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* 增加箭头过渡效果 */
}

.el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.7); /* 悬浮时背景颜色变深 */
  transform: scale(1.2); /* 悬浮时放大箭头 */
}

/* 自定义指示器样式 */
.el-carousel__indicator {
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色指示器 */
}

.el-carousel__indicator--active {
  background-color: rgba(255, 255, 255, 1); /* 活跃指示器为不透明 */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

  1. data 对象:

    • 图片数据保存在 images 数组中，包含图片的 src、alt 和 link 信息。

  2. handleImageClick 方法:

    • 当图片被点击时，handleImageClick 方法会触发。
    • 通过 this.$router.push(image.link) 实现页面跳转，并使用 catch 捕获和处理导航过程中可能出现的错误。

  3. 样式（carousel-image 和 el-carousel__arrow）:

    • carousel-image: 图片设置为宽度 100%，高度 400px，保持比例，使用 object-fit: cover 确保图片填充整个区域。
    • el-carousel__arrow: 自定义箭头的样式，使其在不同状态下（默认和悬浮）有更好的视觉效果。

image-20240811183923057

# 4. 封装成组件

# 1. 创建组件文件

首先在项目的 components 目录下创建一个新的文件，命名为 ImageCarousel.vue。在 ImageCarousel.vue 文件中，封装之前的轮播代码，并将图片数据、轮播配置等通过 props 传递，使组件更加灵活。

<template>
  <el-carousel ref="carousel" :interval="5000" arrow="always" height="400px" :autoplay="true"
    class="carousel-container">

    <!-- 循环渲染 Carousel 项 -->
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <img :src="item.src" :alt="item.alt" class="carousel-image" @click="handleImageClick(item)"
        @error="handleImageError" />
    </el-carousel-item>

  </el-carousel>
</template>

<script>
export default {
  name: 'ImageCarousel',
  props: {
    images: {
      type: Array,
      required: true,
      default: () => []
    },
    interval: {
      type: Number,
      default: 5000
    },
    arrow: {
      type: String,
      default: 'always'
    },
    height: {
      type: String,
      default: '400px'
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    fallbackImage: {
      type: String,
      default: 'https://via.placeholder.com/800x400?text=Image+Not+Available'
    }
  },
  methods: {
    // 处理图片点击事件，使用 vue-router 进行页面跳转
    handleImageClick(image) {
      if (image && image.link) {
        this.$router.push(image.link).catch(err => {
          console.error('Navigation error:', err); // 捕获并记录导航错误
        });
      }
    },
    // 处理图片加载错误
    handleImageError(event) {
      event.target.src = this.fallbackImage;
    }
  }
};
</script>

<style scoped>
/* 为整个 Carousel 容器添加圆角和隐藏溢出内容 */
.carousel-container {
  border-radius: 12px;
  /* 圆角 */
  overflow: hidden;
  /* 隐藏溢出内容 */
}

/* 设置轮播图内图片的样式 */
.carousel-image {
  width: 100%;
  /* 图片宽度占满容器 */
  height: 100%;
  /* 高度占满容器 */
  object-fit: cover;
  /* 保持图片比例，裁剪多余部分 */
  cursor: pointer;
  /* 鼠标悬浮时显示小手状态 */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* 增加平滑的过渡效果 */
}

.carousel-image:hover {
  transform: scale(1.05);
  /* 鼠标悬浮时放大 */
  opacity: 0.9;
  /* 悬浮时略微降低不透明度 */
}

/* 自定义 Carousel 切换箭头的样式 */
.el-carousel__arrow {
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明黑色背景 */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* 增加箭头过渡效果 */
  border-radius: 50%;
  /* 箭头背景圆角 */
}

.el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.7);
  /* 悬浮时背景颜色变深 */
  transform: scale(1.2);
  /* 悬浮时放大箭头 */
}

/* 自定义指示器样式 */
.el-carousel__indicator {
  background-color: rgba(255, 255, 255, 0.5);
  /* 半透明白色指示器 */
  border-radius: 50%;
  /* 圆角 */
  width: 12px;
  height: 12px;
  margin: 0 5px;
  /* 控制指示器之间的间距 */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* 增加过渡效果 */
}

.el-carousel__indicator:hover {
  transform: scale(1.2);
  /* 悬浮时放大指示器 */
  background-color: rgba(255, 255, 255, 0.8);
  /* 悬浮时颜色加深 */
}

.el-carousel__indicator--active {
  background-color: rgba(255, 255, 255, 1);
  /* 活跃指示器为不透明 */
  transform: scale(1.5);
  /* 活跃的指示器稍大 */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

# 3. 使用封装好的组件

现在你可以在任何地方使用这个封装好的组件。只需要在需要使用的地方导入这个组件并传入相应的 props。

<template>
  <div>
    <ImageCarousel
      :images="carouselImages"
      :interval="4000"
      arrow="hover"
      height="450px"
      :autoplay="true"
      fallbackImage="https://via.placeholder.com/800x450?text=No+Image+Available"
    />
  </div>
</template>

<script>
import ImageCarousel from '@/components/ImageCarousel.vue';

export default {
  components: {
    ImageCarousel
  },
  data() {
    return {
      carouselImages: [
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825938.jpg', alt: 'Image 1', link: '/page1' },
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825965.png', alt: 'Image 2', link: '/page2' },
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825266.jpg', alt: 'Image 3', link: '/page3' },
        { src: 'https://web-183.oss-cn-beijing.aliyuncs.com/typora/202408111825893.png', alt: 'Image 4', link: '/page4' }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 4. 封装后的组件说明

  • props 属性:

    • images: 传入一个包含图片数据的数组，每个图片对象应包含 src（图片地址）、alt（图片描述）和 link（点击跳转的链接）属性。
    • interval: 设置自动切换的时间间隔，单位为毫秒。
    • arrow: 控制箭头的显示时机，默认 always。
    • height: 设置轮播图的高度，默认 400px。
    • autoplay: 控制是否自动播放，默认 true。
    • fallbackImage: 当图片加载失败时显示的备用图片。

  • methods:

    • handleImageClick(image): 处理图片点击事件，使用 this.$router.push(image.link) 进行页面跳转。
    • handleImageError(event): 处理图片加载错误，当图片加载失败时，切换到备用图片。

  • style scoped: 样式定义了图片的基本样式、过渡效果、箭头的显示样式和指示器的样式，确保轮播组件的视觉效果和交互体验都非常优秀。

编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
卡片组件 (Card)
折叠面板组件 (Collapse)

← 折叠面板组件 (Collapse)→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar