Iview的Tabs定时切换

最新推荐文章于 2024-08-02 11:00:31 发布

超级大超越

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量493

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u012632105/article/details/108101696

版权

vue 专栏收录该内容

126 篇文章 0 订阅

订阅专栏

用到setInterval()函数

<Tabs :animated="false"
                v-model="mainCate.loopIndex"
            @on-click="fixTab"
          >
            <TabPane :name="trunkModulePrefix+'0'" label="模块1">模块1的内容</TabPane>
            <TabPane :name="trunkModulePrefix+'1'" label="模块2">模块2</TabPane>
            <TabPane :name="trunkModulePrefix+'2'" label="模块3">模块3内容</TabPane>
          </Tabs>

const TRUNK_MODULE_PREFIX = 'trunk_module_';

data() {
      return {

        /**前缀 */
        trunkModulePrefix:TRUNK_MODULE_PREFIX,
        /**Tab轮换控制器*/
        mainCate:{
          loopEnabled:true,
          loopIndexNum:0,
          // loopIndex:'trunk_module_0'
          loopIndex:TRUNK_MODULE_PREFIX+'0'
        },
      }
    },

methods: {
    /**
       * 点击模块tab
       * @param event
       */
      fixTab(event){
        this.$set(this.mainCate,'loopEnabled',false);
        this.$set(this.mainCate,'loopIndex',event);
        this.$set(this.mainCate,'loopIndexNum',StringUtils.subString(event,this.trunkModulePrefix.length));
      },
      /**
       *自动轮播模块
       */
      loopTabs(){
        let _this = this;
        var interval = setInterval(()=>{
          _this.mainCate.loopIndexNum = (_this.mainCate.loopIndexNum+1)%3;
          _this.mainCate.loopIndex = _this.trunkModulePrefix + _this.mainCate.loopIndexNum;
          if(!_this.mainCate.loopEnabled){
            clearInterval(interval) ;
          }
        },5001);
      }
}

mounted() {
      this.loopTabs();
    },