轮播 Carousel
基本用法
渐变轮播图
自动轮播
禁用轮播图
控制各控件大小位置方向
自定义控件
API
Carousel Props
参数名 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
---|---|---|---|---|---|
modelValue | v-model 绑定的值 | number | 0 | ||
width | 轮播图容器宽度 | number / string | 100% | ||
height | 轮播图容器高度 | number / string | 100% | ||
effect | 轮播图形式 | string | slide / fade | slide | |
autoplay | 是否自动播放 | boolean / object | { interval?: number; pauseOnHover?: boolean } | false | |
duration | 同transition-duration | number | 300 | ||
timingFunction | 同transition-timing-function | string | ease | ||
disabled | 是否禁用轮播图(不响应一切事件和切换动作) | boolean | false | ||
direction | 轮播的方向 | string | horizontal / vertical | horizontal | |
showArrow | 是否显示切换箭头 | string | always / hover / never | always | |
showIndicator | 是否显示导航按钮 | boolean | true | ||
indicatorType | 导航按钮的类型 | string | dot / line | dot | |
indicatorPosition | 导航按钮的位置 | string | left / top / right / bottom | bottom |
Carousel Slots
插槽名 | 说明 | 子标签 |
---|---|---|
default | 默认插槽 | v3-carousel-item |
arrowLeft | 自定义左箭头 | |
arrowRight | 自定义右箭头 | |
indicator | 自定义导航按钮 |
CarouselItem Slots
插槽名 | 说明 | 子标签 |
---|---|---|
default | 默认插槽 |