Carousel 走马灯
Carousel 用于在有限空间内循环播放同一类型的图片、文字或卡片内容。VISTA B 直接使用 Element Plus 的 el-carousel 与 el-carousel-item，适合周边地图卡片、多图浏览、运营内容轮播等场景。
基础用法
结合使用 el-carousel 和 el-carousel-item 即可得到一个走马灯。每个轮播项内容都可以自定义。默认情况下，鼠标 hover 指示器会触发切换；设置 trigger="click" 后改为点击触发。
vue
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>动态模糊
设置 motion-blur 后，切换时会给走马灯增加动态模糊效果，让轮播过渡更流畅。
vue
<el-carousel height="200px" motion-blur>
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>指示器
通过 indicator-position 设置指示器位置。默认显示在容器内部，设置为 outside 时显示在容器外部，设置为 none 时隐藏指示器。
vue
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>切换箭头
arrow 用于设置切换箭头的显示时机。默认值为 hover，设置为 always 时始终显示，设置为 never 时始终隐藏。
vue
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>自动高度
当 height 设置为 auto 时，Carousel 会根据当前子内容的高度自动调整容器高度。
vue
<el-carousel height="auto">
<el-carousel-item style="height: 100px">
<h3>height 100px</h3>
</el-carousel-item>
<el-carousel-item style="height: 200px">
<h3>height 200px</h3>
</el-carousel-item>
</el-carousel>卡片模式
当宽度方向空间充足但高度方向空间有限时，可使用卡片模式。设置 type="card" 后，两侧幻灯片会露出并可点击切换。
vue
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>垂直排列
默认方向为 horizontal。设置 direction="vertical" 后，走马灯会在垂直方向切换；也可以和 type="card" 组合使用。
vue
<el-carousel height="200px" direction="vertical" :autoplay="false">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>API
Carousel 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
height | Carousel 的高度 | string | 空 |
initial-index | 初始激活幻灯片索引，从 0 开始 | number | 0 |
trigger | 指示器的触发方式 | hover / click | hover |
autoplay | 是否自动切换 | boolean | true |
interval | 自动切换时间间隔，单位为毫秒 | number | 3000 |
indicator-position | 指示器位置 | '' / outside / none | '' |
arrow | 切换箭头的显示时机 | always / hover / never | hover |
type | Carousel 类型 | '' / card | '' |
card-scale | 当 type 为 card 时，二级卡的缩放大小 | number | 0.83 |
loop | 是否循环显示 | boolean | true |
direction | 展示方向 | horizontal / vertical | horizontal |
pause-on-hover | 鼠标悬浮时是否暂停自动切换 | boolean | true |
motion-blur | 是否启用切换动态模糊效果 | boolean | false |
Carousel 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
change | 当前幻灯片切换时触发，参数为新索引和旧索引 | (current: number, prev: number) => void |
Carousel 插槽
| 插槽 | 说明 | 子标签 |
|---|---|---|
default | 自定义默认内容 | Carousel-Item |
Carousel 方法
| 方法名 | 说明 | 类型 |
|---|---|---|
activeIndex | 当前激活幻灯片索引 | number |
setActiveItem | 手动切换幻灯片，传入索引或对应 el-carousel-item 的 name | (index: number | string) => void |
prev | 切换到上一张幻灯片 | () => void |
next | 切换到下一张幻灯片 | () => void |
Carousel-Item 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
name | 幻灯片名称，可用作 setActiveItem 的参数 | string | 空 |
label | 对应指示器的文本 | string / number | 空 |
Carousel-Item 插槽
| 插槽 | 说明 |
|---|---|
default | 自定义默认内容 |
使用提醒
走马灯适合展示同类内容，不建议把完全不同的任务入口混在同一组轮播中。自动播放内容需要控制数量和切换速度，避免用户来不及阅读；重要操作建议提供固定入口，不只依赖轮播曝光。