当前位置: 首页 > Web前端 > HTML5

vue前端页面无操作时,执行某些操作

时间:2023-04-05 14:58:13 HTML5

要求:当用户长时间不操作电脑时,应自动退出系统,以防他人从使用计算机操作以前用户的数据。或者用户长时间不操作,把鼠标藏起来等。思路是监听鼠标移动和键盘操作。设置定时器,当定时器达到指定值时,会跳转并提示。开启定时器和关闭定时器设置一个计数值,使用js原生事件监听鼠标键盘,如果有触发鼠标或键盘,则清零计数值,否则计数值一直累加,当累加到一个目标值,即没有任何操作退出系统的时间可以触发退出系统函数。data(){return{count:0}},mounted(){//监控鼠标document.onmousemove=(event)=>{letx1=event.clientXlety1=event.clientYif(this.x!==x1||this.y!==y1){this.count=0}this.x=x1this.y=y1}//监听键盘document.onkeydown=()=>{this.count=0}//ListentoScrolldocument.onscroll=()=>{this.count=0}this.setTimer()},//最后在beforeDestroy()生命周期清除定时器:beforeDestroy(){this.clearTimer()},方法:{clearTimer(){clearInterval(window.myTimer)window.myTimer=null},setTimer(){this.count=0if(!window.myTimer){window.myTimer=window.setInterval(this.cookieTimeout,1000)}},cookieTimeout(){//用户5分钟不操作自动退出letoutTime=5this.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:'登录'})}},}