vue项目中用户6分钟不操作，出现屏保。

1.App.vue中加全屏图片

<img  style="width: 100%;height: 100%;position: fixed;top: 0;z-index: 9999" v-if="logoutCount>outTime" src="./assets/images/no-back.jpg" alt="">

2.设置分钟

data() {
  return {
    logoutCount: 0,
    outTime:60*3  //设置分钟数
  }
},

3.核心方法

mounted() {
  // 监听鼠标
  document.onmousemove = event => {
    this.logoutCount = 0
  }
  // 监听键盘
  document.onkeydown = () => {
    this.logoutCount = 0
  }
  // 监听Scroll
  document.onscroll = () => {
    this.logoutCount = 0
  }
  this.setTimer();
  console.log('this.$route',this.$route.path)
},
// 清除定时器
beforeDestroy() {  //实例销毁之前调用
  this.clearTimer()
},
methods: {
  clearTimer() {
    clearInterval(window.logoutTimer)
    window.logoutTimer = null
  },
  setTimer() {
    this.logoutCount = 0
    if (!window.logoutTimer) {
      window.logoutTimer = window.setInterval(this.logout, 1000)
    }
  },
  async logout() {
    const outTime = this.outTime;
    // 判断用户N分钟无操作就自动登出
    this.logoutCount++
    if (this.logoutCount > outTime) { // 出现屏保

    }
  }
}