关于前端:vue-前端页面无操作时执行某些操作

需要：

用户长时间不再操作电脑的时候，应该给用户主动退出零碎，这样能够避免有他人应用电脑操作上一个用户的数据。
或用户长时间不操作，暗藏鼠标等。

思路

• 监听鼠标挪动以及键盘操作。
• 设置timer，timer达到指定值后进行跳转并提醒。
• 开启timer并且敞开timer

实现

设定一个计数值，利用js原生的事件，对鼠标，键盘进行监听，如果一有触发的鼠标，键盘的话，就将计数值清零，否则，计数值始终累加，当累加到一个目标值，即那个无操作退出零碎的工夫就能够触发退出零碎函数。

data () {
    return {
        count: 0
        }
},
mounted () {
    // 监听鼠标
    document.onmousemove = (event) => {
      let x1 = event.clientX
      let y1 = event.clientY
      if (this.x !== x1 || this.y !== y1) {
        this.count = 0
      }
      this.x = x1
      this.y = y1
    }
    // 监听键盘
    document.onkeydown = () => {
      this.count = 0
    }
    // 监听Scroll
    document.onscroll = () => {
      this.count = 0
    }
    this.setTimer()
  },
// 最初在beforeDestroy()生命周期内革除定时器：
  beforeDestroy () {
    this.clearTimer()
  },
methods: {
    clearTimer () {
      clearInterval(window.myTimer)
      window.myTimer = null
    },
    setTimer () {
      this.count = 0
      if (!window.myTimer) {
        window.myTimer = window.setInterval(this.cookieTimeout, 1000)
      }
    },
    cookieTimeout () {
    // 判断用户5分钟无操作就主动登出
      let outTime = 5
      this.count++
      if (this.count === outTime * 60) {
        this.$message({
          message: '零碎曾经五分钟无操作，将在十秒后退出登录，如不想退出零碎，请任意操作鼠标键盘...',
          type: 'error'
        })
        setTimeout(this.logout, 10000)
        // console.log('aaaa', this.count)
      }
    },
    logout () {
      // console.log('bbb', this.count)
      if (this.count >= 5 * 60) {
        sessionStorage.setItem('loginname', '')
        this.$router.replace({name: 'Login'})
      }
    },
}