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>
