代码演示
如何引入
jsx
import { Carousel } from '@kousum/semi-ui-vue';基本用法
基本用法
主题切换
默认定义了三种主题： primary、light、dark
指示器
指示器可以调节类型、位置、尺寸
类型： dot、line、columnar
位置： left、center、right
尺寸： small、medium
箭头
通过 showArrow 属性控制箭头是否可见
如果箭头可见，通过 arrowType 属性控制箭头展示的时机
定制箭头
通过 arrowProps 属性定制箭头样式和点击事件
播放参数
通过给 autoPlay 传入参数 interval 控制两张图片之间的时间间隔，传入 hoverToPause 控制鼠标放置在图片上时是否停止播放
动画效果与切换速度
通过给 animation 属性控制动画，可选值有 fade，slide
通过给 speed 属性控制两张图片之间的切换时间，单位为ms
受控的轮播图
API 参考
Carousel
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| activeIndex | 受控属性 | number | - | 2.10.0 |
| animation | 切换动画，可选值：fade，slide | "fade" | "slide" | "slide" | 2.10.0 |
| arrowProps | 箭头参数，用于自定义箭头样式和点击事件 | () => { leftArrow: ArrowButton, rightArrow: ArrowButton } | - | 2.10.0 |
| autoPlay | 是否自动循环展示，或者传入 { interval: 自动切换时间间隔(默认: 2000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) } | boolean ｜ { interval?: number, hoverToPause?: boolean } | true | 2.10.0 |
| className | 样式类名 | string | - | 2.10.0 |
| defaultActiveIndex | 初始化时默认展示的索引 | number | 0 | 2.10.0 |
| indicatorPosition | 指示器位置，可选值有： left、center、right | "left" | "center" | "right" | "center" | 2.10.0 |
| indicatorSize | 指示器尺寸，可选值有： small、medium | "small" | "medium" | "small" | 2.10.0 |
| indicatorType | 指示器类型，可选值有： dot、line、columnar | "dot" | "line" | "columnar" | "dot" | 2.10.0 |
| theme | 指示器和箭头主题，可选值有： primary、light、dark | "primary" | "light" | "dark" | "light" | 2.10.0 |
| onChange | 图片切换时的回调 | (index: number, preIndex: number) => void | - | 2.10.0 |
| arrowType | 箭头展示时机，可选值有： hover、always | "hover" | "always" | always | 2.10.0 |
| showArrow | 是否展示箭头 | boolean | true | 2.10.0 |
| showIndicator | 是否展示指示器 | boolean | true | 2.10.0 |
| slideDirection | 动画效果为slide时的滑动的方向，可选值有： left、right | "left" | "right" | "left" | 2.10.0 |
| speed | 切换速度，单位ms | number | 300 | 2.10.0 |
| style | 内联样式 | CSSProperties | - | 2.10.0 |
| trigger | 指示器触发的时机，可选值有： hover、click | "hover" | "click" | - | 2.10.0 |
ArrowButton
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| props | 箭头div上的可传参数，包括style, onClick事件等 | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | - | 2.10.0 |
| children | 箭头自定义Icon | React.ReactNode | - | 2.10.0 |
Methods
绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
| 方法 | 说明 | 版本 |
|---|---|---|
| play() | 播放 | 2.10.0 |
| stop() | 停止播放 | 2.10.0 |
| goTo(targetIndex) | 切换到指定位置 | 2.10.0 |
| prev() | 切换到上一位置 | 2.10.0 |
| next() | 切换到下一位置 | 2.10.0 |