第一步
創(chuàng)建兩個(gè)按鈕
第二步
書(shū)寫(xiě)按鈕選中和未選中狀態(tài)的類(lèi)名以及css樣式
第三步
給el-carousel添加ref屬性用來(lái)獲取這個(gè)節(jié)點(diǎn)---carousel
第四步
給兩個(gè)按鈕添加點(diǎn)擊事件，同時(shí)通過(guò)事件的參數(shù)傳遞當(dāng)前按鈕的標(biāo)識(shí)牙甫，要和輪播組件的索引值相對(duì)應(yīng)---@click=changeHandle(index)
第五步
通過(guò)this.$refs獲取到輪播節(jié)點(diǎn)屑宠，再通過(guò)這個(gè)輪播組件自帶的設(shè)置索引的方法改變輪播索引值，此時(shí)點(diǎn)擊按鈕已經(jīng)可以控制輪播翻頁(yè)
changeHandle(index){? ? this.$refs.carousel.setActiveItem（index） }
第六步
隨著翻頁(yè)操作改變按鈕的選中樣式
定義一個(gè)變量curIndex，通過(guò)組件自帶的改變事件(@change=swiperChange)，將當(dāng)前索引值賦值給這個(gè)變量，按鈕通過(guò)變量值來(lái)控制按鈕自身的類(lèi)名拔疚，從而控制選中樣式
swiperChange(num){ this.curIndex=num }
第七步
選中和未選中的類(lèi)名分別為select ， unselect
去通過(guò)改變類(lèi)名的方法控制樣式愕贡，書(shū)寫(xiě)格式如下:
:class={"select":curIndex == 當(dāng)前按鈕的索引，"unselect":curIndex !== 當(dāng)前按鈕索引}
