vue中实现定时刷新页面以及菜单定时自动跳转

vue中实现定时刷新页面以及菜单定时自动跳转,第1张

1、在mixins文件下新建mixinsMenu.js

import { mapGetters } from 'vuex'
import {getStore} from '@/utils/store'

const boardMixins={
  computed:{
    ...mapGetters(['pageIndex']),
    userInfo(){
      return getStore({name: 'userInfo'})
    }
  },
  created(){
    this.initData()
    this.initTimer()
    this.setPageChage()
  },
  data(){
    return {
      timer:null,//定时器
    }
  },
  methods: {
    // 5秒刷新数据
    initTimer(){
      this.timer = setInterval(()=>{
        this.initData()
      },5000)
    },
    //翻页,根据路由配置顺序翻页
    setPageChage(){
        let times = 120000
        //总页数
        let {pageIndex} = this;
        let menus = getStore({name: 'menus'});
        let pageUrls = [];
        if(menus&&menus.length>0){
          pageUrls = menus[0].children
        }
        
        if(pageUrls.length>1){
          setTimeout(()=>{
            pageIndex++
            if(pageIndex>=pageUrls.length){
              pageIndex = 0
            }
            this.$store.commit('SET_PAGE_INDEX',pageIndex);
            this.$router.push(pageUrls[pageIndex].path)
            clearInterval(this.timer)
          },times)
          }
      })
    },

  },
};
export default mixinsMenu;

2、在页面中引入mixinsMenu

import mixinsMenu from '../mixins/mixinsMenu'
export default{
  name:'',
  mixins: [mixinsMenu],
  methods: {
    // 初始化数据
    initData(){
      this.getData()
      this.getList()
    },
    getData(){
      //请求数据
    },
    getList(){
      //请求数据
    },
  }
}

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1322052.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-12
下一篇2022-06-12

发表评论

登录后才能评论

评论列表(0条)

    保存