ant design vue tabs 標籤頁的輪播效果

<template>
	 <a-tabs :active-key="currentKey" @change="callback">
       <a-tab-pane v-for="(tem,index) in pages" :key="index"
                      class="nav_active">
              <!--  scrolling="no" 取消滾動條 -->
              <span slot="tab">
                 <img :src="tem.imgSrc" style="position: relative; top:-3px">
                  {{tem.tabName}}
              </span>
              <iframe style="width: 100%;" :src="tem.iframeSrc" frameborder="no" allowtransparency="yes"
                                scrolling="no"></iframe>
      </a-tab-pane>
     </a-tabs>
 </template>

這裏綁定了一個變量currentKey, 通過修改currentKey的值，改變選中的標籤頁。a-tabs的屬性使用active-key, 不要使用defaultActiveKey。同時使用短橫線，不要使用駝峯

<script>
   new Vue({
       el: "#app",
       data: {
           currentKey: 0,
           message: 'hello',
           timer: null,
           pages: [
              
           ]
       },
       mounted() {
           // 綁定計時器
           this.$nextTick(function () {
               this.timer = setInterval(this.changeTab, 5000);
           })
       },
       methods: {
           callback(key) {
               console.log(key);
               this.currentKey = key;
               // 先清空再綁定，結果手動切換之後，下次時間不夠五秒的問題
               clearInterval(this.timer)
               this.timer = setInterval(this.changeTab, 5000);
           },
           // 定時器函數
           changeTab () {
               // 因爲這裏只有六個，所以最大爲5。超過5時，轉成0
               if (this.currentKey == 5) {
                   this.currentKey = 0;
               } else {
                   this.currentKey++;
               }
           }
       }
   })
</script>