vue 监听界面无操作跳转广告页

今天做一个婺城人大大屏项目时， 产品在看完演示后， 又提出了一个要求， 当用户长时间无操做界面的时候，屏幕要自动跳转到广告页。功能不复杂， 但是， 每一个页面都要加上这个监听， 于是 我想到了使用 vue 的 mixins 功能

思想

我们在页面的生命周期中 记录一个开始进入页面的时间， 然后开始倒计时， 当面页有 操作的时候， 就重置一下开始的时间

上代码

export const timeshowad = {
  data(){
    return {
      startTime:"",
      stateTime:3.5*60*1000,   //设定的无操作时长
      intervalid:0
    }
  },
  mounted(){
    this.startTime = new Date().getTime();
    this.checkouttime();
    document.addEventListener("keydown",this.resetStartTime);
    document.addEventListener('touchstart',this.resetStartTime);
  },

  beforeDestroy(){
    if(this.intervalid){
      clearInterval(this.intervalid);
    }
  },



  methods:{
    resetStartTime(){
      this.startTime = new Date().getTime();
    },

    checkouttime(){
      this.intervalid = setInterval(()=>{
        let nowtime = new Date().getTime();
        console.log(nowtime);
        console.log(this.startTime);
        console.log(this.stateTime);
        if(nowtime - this.startTime > this.stateTime){
          this.$router.push("/swiperimgs")
        }
      },1000)
    }
  }
}

代码简单， 读一下就能懂

最后， 把它引入到页面中， 就可以了