VUE主页未操作点击或者已点击2分钟后自动跳转到屏保页面

今天分享如何设置主页未操作或者已点击屏幕2分钟后自动跳转到屏保页面。

核心代码

<template>
  <div @mousemove="resetTimer" @keydown="resetTimer">
  </div>
</template>
<script>
export default {
  inject:['reload'],  
  data() {
    return {
        timer: null,
    }
  },
  created() {
    this.timer = setTimeout(() => {
      this.$router.push("/screenSaver"); // 2分钟后跳转到屏保页
    }, 120000); // 设置 2 分钟计时器
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    resetTimer() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$router.push('/screenSaver')
      }, 120000)
    },
  }
}
</script>

代码解析 

created()设置若进入页面未操作时，2分钟后跳转到屏保页面，若点击有操作时，beforeDestroy()中clearInterval()方法清空时间，并且已在div中设置mousemove和keydown属性，每当鼠标不在点击没有操作时，先清空之前的计时器，再重新计时，2分钟后自动跳转到屏保页面。