Vue3操作页面长时间未操作返回首页

Vue3长时间操作页面无操作返回首页

1.1需求分析

1.长时间 --- 定时器

2.无操作 ---- 监控页面上的点击，触摸，滑动等事件

3.返回首页 ------ 切换路由

1.2思路

只需要设置一个定时器，在进入页面时开始计时，如果规定时间内有操作，则会重新计时，时间一到自动切换路由

1.3代码演示

首页使用element-ui的轮播组件，可参考文档安装使用
官方地址：https://element-plus.gitee.io/zh-CN/guide/quickstart.html

index.vue
<template>
    <div class="home" @click="goTo">
        <div>
            <el-carousel :interval="4000" type="card" height="80vh">
                <el-carousel-item v-for="item in 6" :key="item">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="title">
            点击任意区域跳转
        </div>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import router from '@/router'

export default {
    setup () {
        const goTo =()=>{
            router.push('/home')  //点击此页面任何区域跳转操作页面
        }
        return{
            goTo
        }
    }
}
</script>

<style lang="stylus" scoped>
.home
    height 100vh
    background-color #aaa
    .el-carousel__item:nth-child(2n) 
        background-color: #99a9bf   
    .el-carousel__item:nth-child(2n + 1) 
        background-color: #d3dce6
    .title
        text-align: center
        font-size: 30px
        color: red
        font-weight: 700
</style>

home.vue
<template>
    <div>
        我是home页面
        <button @click="go">跳转my</button>
    </div>
</template>

<script>
import { nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'

export default {
    setup () {
        onMounted(() => {
            console.log("我又重新获取时间啦");
            sessionStorage.setItem("lastClickTime",new Date().getTime()) //跳转页面后返回此页面要重新计时
            isTimeOut()
        })
        let timer = null //定时器
        let route = useRoute()
        //计算时间差
        const timeDifference =(lastTime,nowTime)=>{
            var date1= lastTime;  //开始时间
            var date2 = nowTime;    //结束时间
            var date3 = date2- date1;   //时间差的毫秒数 
            //计算出相差天数
            var days=Math.floor(date3/(24*3600*1000))
            //计算出小时数
            var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
            var hours=Math.floor(leave1/(3600*1000))
            //计算相差分钟数
            var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
            var minutes=Math.floor(leave2/(60*1000))
            //计算相差秒数
            var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
            var seconds=Math.round(leave3/1000)
            return seconds //将相差的秒数抛出做对比（可根据实际情况抛出自己实际需要的时间差单位）
        }
        //获取第一次点击的时间
        window.addEventListener("click",()=>{
            sessionStorage.setItem("lastClickTime",new Date().getTime()) //存入临时缓存区
        },true)
        const isTimeOut=()=>{
            clearInterval(timer)//每次使用定时器之前都要清空一次
            //每1秒循环检查一次时间差
            timer=window.setInterval(()=>{
                let lastTime = sessionStorage.getItem("lastClickTime") //第一次点击时间
                let currentTime = new Date().getTime() //当前时间
                console.log("当前点击时间和现在点击时间",lastTime,currentTime,timeDifference(lastTime,currentTime));
                //如果当前时间减去第一次的时间超过规定时间之后，跳转回指示页面并清空定时器
                if(timeDifference(lastTime,currentTime) >10){
                    if(route.path != '/'){
                        clearInterval(timer)
                        router.push('/')
                    }
                }
            },1000)
        }
        const go =()=>{
            router.push('/my') //跳转另一个操作页面
        }
        onUnmounted(()=>{
            clearInterval(timer) //组件销毁之后清楚定时器
            window.removeEventListener("click",()=>{},true) //清楚点击时存储的时间
        })
        return{
            go
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

my.vue
<template>
    <div>
        My页面
    </div>
</template>

<script>
import { reactive, toRefs,onMounted } from 'vue'
import router from '@/router';

export default {
    setup () {
        onMounted(() => {
            setTimeout(() => {
                router.push('/home') //定时5秒返回home界面
            }, 5000);
        })
    }
}
</script>

<style lang="scss" scoped>

</style>