Tu View PlusCarousel 图片轮播
用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。
基础用法
图片轮播的基础用法
1
2
3
<template>
<tu-carousel :default-current="2" :style="{ height: '240px' }">
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style><template>
<tu-carousel :default-current="2" :style="{ height: '240px' }">
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style>自动切换
可以通过 autoPlay 设置是否自动切换。可设置 moveSpeed, timingFunc 实现不同切换幻灯片效果。
1
2
3
<template>
<tu-carousel
indicator-type="dot"
show-arrow="hover"
:auto-play="true"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style><template>
<tu-carousel
indicator-type="dot"
show-arrow="hover"
:auto-play="true"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style>指示器
可以指定指示器类型：dot、line、slider 和位置 left、right、top、bottom、outer。
1
2
3
<template>
<div class="mb-2">
<tu-radio-group
type="button"
v-model="indicatorType"
@change="handleIndicatorTypeChange"
>
<tu-radio label="dot">dot</tu-radio>
<tu-radio label="line">line</tu-radio>
<tu-radio label="slider">slider</tu-radio>
</tu-radio-group>
</div>
<div class="mb-2">
<tu-radio-group
type="button"
v-model="indicatorPosition"
@change="handleIndicatorPositionChange"
>
<tu-radio label="left">left</tu-radio>
<tu-radio label="right">right</tu-radio>
<tu-radio label="top">top</tu-radio>
<tu-radio label="bottom">bottom</tu-radio>
<tu-radio label="outer">outer</tu-radio>
</tu-radio-group>
</div>
<tu-carousel
show-arrow="never"
:indicator-type="indicatorType"
:indicator-position="indicatorPosition"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const indicatorType = ref('dot');
const handleIndicatorTypeChange = (_indicatorType: string) => {
indicatorType.value = _indicatorType;
};
const indicatorPosition = ref('bottom');
const handleIndicatorPositionChange = (_indicatorPosition: string) => {
indicatorPosition.value = _indicatorPosition;
};
</script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style><template>
<div class="mb-2">
<tu-radio-group
type="button"
v-model="indicatorType"
@change="handleIndicatorTypeChange"
>
<tu-radio label="dot">dot</tu-radio>
<tu-radio label="line">line</tu-radio>
<tu-radio label="slider">slider</tu-radio>
</tu-radio-group>
</div>
<div class="mb-2">
<tu-radio-group
type="button"
v-model="indicatorPosition"
@change="handleIndicatorPositionChange"
>
<tu-radio label="left">left</tu-radio>
<tu-radio label="right">right</tu-radio>
<tu-radio label="top">top</tu-radio>
<tu-radio label="bottom">bottom</tu-radio>
<tu-radio label="outer">outer</tu-radio>
</tu-radio-group>
</div>
<tu-carousel
show-arrow="never"
:indicator-type="indicatorType"
:indicator-position="indicatorPosition"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const indicatorType = ref('dot');
const handleIndicatorTypeChange = (_indicatorType: string) => {
indicatorType.value = _indicatorType;
};
const indicatorPosition = ref('bottom');
const handleIndicatorPositionChange = (_indicatorPosition: string) => {
indicatorPosition.value = _indicatorPosition;
};
</script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style>切换方向
默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来使用垂直方向切换。
1
2
3
<template>
<tu-carousel
show-arrow="never"
direction="vertical"
indicator-position="right"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style><template>
<tu-carousel
show-arrow="never"
direction="vertical"
indicator-position="right"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style>卡片化
当页面宽度方向空间空余，但高度方向空间多余时，可指定 animation 为 card 使用卡片化风格。
1
2
3
<template>
<tu-carousel
animation-name="card"
show-arrow="never"
indicator-position="outer"
:autoPlay="true"
:style="{ width: '100%', height: '240px' }"
>
<tu-carousel-item v-for="item in 3" :style="{ width: '60%' }">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style><template>
<tu-carousel
animation-name="card"
show-arrow="never"
indicator-position="outer"
:autoPlay="true"
:style="{ width: '100%', height: '240px' }"
>
<tu-carousel-item v-for="item in 3" :style="{ width: '60%' }">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style>渐隐切换
指定 animation 为 fade 使用渐隐切换效果。
1
2
3
<template>
<tu-carousel
animation-name="fade"
show-arrow="never"
:auto-play="true"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style><template>
<tu-carousel
animation-name="fade"
show-arrow="never"
:auto-play="true"
:style="{ height: '240px' }"
>
<tu-carousel-item v-for="item in 3">
<h3>{{ item }}</h3>
</tu-carousel-item>
</tu-carousel>
</template>
<script lang="ts" setup></script>
<style scoped>
.tu-carousel__item:first-child {
background-color: #875c00;
}
.tu-carousel__item:nth-child(2n) {
background-color: #035880;
}
.tu-carousel__item:last-child {
background-color: #2a3c85;
}
.tu-carousel h3 {
text-align: center;
line-height: 240px;
margin-top: 0;
color: #fff;
}
</style>Carousel API
Carousel Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| current(v-model) | 当前展示索引 | Number | - |
| default-current | 当前展示索引 | Number | 1 |
| auto-play | 是否自动循环展示，或者传入 { interval: 自动切换的时间间隔(默认: 3000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) } 进行高级配置 | Boolean CarouselAutoPlayConfig | false |
| move-speed | 幻灯片移动速率(ms) | Number | 500 |
| animation-name | 切换动画 | String | slide |
| trigger | 幻灯片切换触发方式, click/hover 指示器 | String | click |
| direction | 幻灯片移动方向 | String | vertical |
| show-arrow | 切换箭头显示时机 | String | always |
| arrow-class | 切换箭头样式 | String | - |
| indicator-type | 指示器类型，可为小方块和小圆点或不显示 | String | dot |
| indicator-position | 指示器位置 | String | bottom |
| indicator-class | 指示器的样式 | String | - |
| transition-timing-function | 过渡速度曲线, 默认匀速 transition-timing-function | String | cubic-bezier(0.34, 0.69, 0.1, 1) |
Carousel Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 幻灯片发生切换时的回调函数 | Function |