在 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 s 訪問) E l e m e n t U I 的 C a r o u s e l 組件不直接暴露方法供外部調用,但你可以通過給 C a r o u s e l 組件設置 r e f 屬性,然后在 V u e 實例中通過 t h i s . refs 訪問) Element UI 的 Carousel 組件不直接暴露方法供外部調用,但你可以通過給 Carousel 組件設置 ref 屬性,然后在 Vue 實例中通過 this. refs訪問)ElementUI的Carousel組件不直接暴露方法供外部調用,但你可以通過給Carousel組件設置ref屬性,然后在Vue實例中通過this.refs.carouselRefName 來訪問 Carousel 實例的內部方法(如果有的話),但通常 Carousel 組件不直接提供這樣的方法。
示例
vue
<el-carousel
:height=“400px”
:initial-index=“0”
autoplay=“true”
:interval=“4000”
arrow=“always”
@change=“handleChange”>
{{ item }}
Vue 3 + Element Plus Carousel
屬性(Props)
height: 走馬燈的高度。
initial-index: 初始展示的幻燈片索引,從 0 開始。
autoplay: 是否自動播放,可以是一個布爾值或者一個包含間隔時間的對象。
interval: 自動播放的時間間隔,以毫秒為單位。
arrow: 是否顯示切換箭頭,可選值為 ‘always’、‘hover’、‘never’。
indicator-position: 指示器的位置,可選值為 ‘outside’、‘none’。
autoplay-hover-pause: 鼠標懸停時是否暫停自動播放。
dot-size: 指示點的大小,以像素為單位。
以及其他可能的布局和樣式相關屬性。
事件(Events)
change: 幻燈片切換時觸發。
方法(通常不直接暴露)
與 Element UI 類似,Element Plus 的 Carousel 組件也不直接暴露方法供外部調用。
示例
vue
<el-carousel
height=“400px”
:initial-index=“0”
autoplay
:interval=“4000”
arrow=“always”
@change=“handleChange”>
{{ item }}
請注意,在 Vue 3 示例中,我使用了 Vue 3 的 Composition API (defineComponent 和 setup 函數) 來定義組件。然而,對于簡單的用例,你仍然可以使用 Vue 3 的 Options API(類似于 Vue 2 的方式),這取決于你的個人偏好和項目需求。
兩個示例都展示了如何設置 Carousel 組件的基本