在 Vue 2 中,我们通常使用 Element UI,而在 Vue 3 中,我们则使用 Element Plus 作为其替代品。对于 Carousel 走马灯组件,这两个库提供了相似的功能,但在 Vue 2 和 Vue 3 的上下文中,它们的属性、事件和方法可能会有所不同。以下将分别介绍 Vue 2 下的 Element UI Carousel 和 Vue 3 下的 Element Plus Carousel 的属性、事件和方法,并给出示例。
Vue 2 + Element UI Carousel
属性(Props)
height: 走马灯的高度。
initial-index: 初始展示的幻灯片索引,从 0 开始。
trigger: 切换幻灯片的触发方式,默认为 ‘click’。
autoplay: 是否自动切换,可以是一个布尔值或者一个包含间隔时间的对象。
interval: 自动切换的时间间隔,以毫秒为单位。
arrow: 是否显示切换箭头。
indicator-position: 指示器的位置,可选值为 ‘outside’、‘none’ 或 ‘inside’。
indicator-color: 指示点颜色。
autoplay-hover-pause: 鼠标悬停时是否暂停自动播放。
事件(Events)
change: 幻灯片切换时触发。
方法(通常不直接暴露,但可通过 r e f