ElementUI 走馬燈效果（輪播）自定義訓示器（切換标簽）的實作方法

走馬燈的效果自己手動實作也并難，隻是代碼量比較大，要考慮的邏輯比較多，是以更多情況下我們會考慮用現有的架構來實作，比如 ElementUI。

但在使用的過程中，我們通常需要的走馬燈樣式與官方提供的并不相同，尤其是訓示器的效果。今天我來記錄一下，自定義的訓示器實作方法。

知識點：ElementUI、 el-carousel 元件 、ref

實作思路：通過事件改變指定顯示的内容

實作效果：上方 tab 切換的時候，下方的文字部分會跟着變，也就是走馬燈的效果，文字部分是示意，并沒有做對應的 mock 資料，可忽略。

具體實作代碼

tab 切換部分

<div class="distrbute_btns">
              <button :class="active == index ? 'active' : ''" v-for="(item, index) in btnListDis" :key="index" @click="clickBtn(index)">{{ item }}</button>
</div>
<script>
methods: {
    // 點選tab切換，給走馬燈部分指定下标
    clickBtn(e){
      this.$refs.carousel.setActiveItem(e) // 将tab的下标指定為走馬燈的下标
      this.active = e // tab切換的下标
    },
}
</script>      

<el-carousel trigger="click" height="150px" ref="carousel" @change="changeItem">
      <el-carousel-item v-for="item in btnListDis.length" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
</el-carousel>
<script>
methods:{
  changeItem(e){
        this.active = e // 将走馬燈的 下标 指定為 tab 的下标
      },
  }
</script>