vue 离开页面时间_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