当前位置：首页 > news >正文

MyUI轮播Carousel组件文档

news 2025/7/18 10:42:46

简介

VcCarousel 是一个灵活、响应式的轮播组件，支持自动轮播、手势滑动、自定义指示器和导航箭头等功能。

安装与使用

import VcCarousel from '@/components/Carousel/Carousel.vue';
import VcCarouselItem from '@/components/Carousel/CarouselItem.vue';components: {VcCarousel,VcCarouselItem},

基本用法

vue

<template><VcCarousel :autoplay="true" :interval="3000"><VcCarouselItem><img src="banner1.jpg" alt="Banner 1"></VcCarouselItem><VcCarouselItem><img src="banner2.jpg" alt="Banner 2"></VcCarouselItem><VcCarouselItem><img src="banner3.jpg" alt="Banner 3"></VcCarouselItem></VcCarousel>
</template>

属性 (Props)

VcCarousel 属性

参数	说明	类型	默认值	可选值
autoplay	是否自动轮播	Boolean	false	true/false
interval	自动轮播间隔(ms)	Number	3000	-
showIndicators	是否显示指示器	Boolean	true	true/false
showArrows	是否显示导航箭头	Boolean	true	true/false
height	轮播高度	String	'auto'	'auto' 或 '400px'等
animationDuration	切换动画时长(ms)	Number	500	-
loop	是否循环轮播	Boolean	true	true/false

VcCarouselItem 属性

参数	说明	类型	默认值	可选值
width	轮播项宽度	String	'100%'	'100%' 或 '500px'等

插槽 (Slots)

VcCarousel 插槽

插槽名	说明
default	轮播项内容，需要包裹在 VcCarouselItem 中
left-arrow	自定义左侧箭头内容
right-arrow	自定义右侧箭头内容

VcCarouselItem 插槽

插槽名	说明
default	轮播项内容

方法 (Methods)

方法名	说明	参数
prev	切换到上一项	-
next	切换到下一项	-
goTo	切换到指定项	index: 要切换到的索引

事件 (Events)

事件名	说明	回调参数
change	轮播项切换时触发	(currentIndex: 当前索引)

高级用法

自定义箭头和内容

vue

<template><VcCarousel><template #left-arrow><div class="custom-arrow">←</div></template><VcCarouselItem v-for="item in items" :key="item.id"><div class="carousel-content"><h2>{{ item.title }}</h2><p>{{ item.description }}</p><button @click="handleAction(item)">查看详情</button></div></VcCarouselItem><template #right-arrow><div class="custom-arrow">→</div></template></VcCarousel>
</template>

响应式高度

vue

<template><VcCarousel :height="responsiveHeight"><!-- 轮播项 --></VcCarousel>
</template><script>
export default {data() {return {responsiveHeight: '400px'}},mounted() {this.handleResize()window.addEventListener('resize', this.handleResize)},beforeDestroy() {window.removeEventListener('resize', this.handleResize)},methods: {handleResize() {this.responsiveHeight = window.innerWidth < 768 ? '300px' : '500px'}}
}
</script>

样式定制

可以通过覆盖以下 CSS 变量来自定义样式：

css

:root {--vc-carousel-indicator-size: 10px;--vc-carousel-indicator-color: rgba(255, 255, 255, 0.5);--vc-carousel-indicator-active-color: #fff;--vc-carousel-arrow-bg: rgba(0, 0, 0, 0.3);--vc-carousel-arrow-color: white;--vc-carousel-arrow-size: 40px;
}