第一步

創(chuàng)建兩個按鈕

第二步

書寫按鈕選中和未選中狀態(tài)的類名以及css樣式

第三步

給el-carousel添加ref屬性用來獲取這個節(jié)點---carousel

第四步

給兩個按鈕添加點擊事件，同時通過事件的參數(shù)傳遞當前按鈕的標識，要和輪播組件的索引值相對應---@click=changeHandle(index)

第五步

通過this.$refs獲取到輪播節(jié)點，再通過這個輪播組件自帶的設置索引的方法改變輪播索引值，此時點擊按鈕已經(jīng)可以控制輪播翻頁

changeHandle(index){? ? this.$refs.carousel.setActiveItem（index） }

第六步

隨著翻頁操作改變按鈕的選中樣式

定義一個變量curIndex，通過組件自帶的改變事件(@change=swiperChange)，將當前索引值賦值給這個變量，按鈕通過變量值來控制按鈕自身的類名，從而控制選中樣式

swiperChange(num){ this.curIndex=num }

第七步

選中和未選中的類名分別為select ， unselect

去通過改變類名的方法控制樣式，書寫格式如下:

:class={"select":curIndex == 當前按鈕的索引，"unselect":curIndex !== 當前按鈕索引}