问题描述:在自助机上操作上会出现一个问题,就是用户操作到一半或者操作完成了就走了,没有返回到首页。
功能介绍:vue监听当前页面是否处于操作状态,如果超过指定的时间都处于待机无操作状态,直接返回到指定页面。
template代码如下:
<template>
<div id="app" @mousemove="moveEvent" @click="moveEvent">
<router-view v-if="isRefersh" />
</div>
</template>
script代码如下:
export default {
data() {
return {
countdown: 10
timmer: null
};
},
methods: {
/*监听鼠标滑动和点击事件*/
moveEvent() {
//在规定的状态下执行方法
if (this.$route.query.flag && localStorage.getItem('dType')) {
clearTimeout(this.timmer);
this.init();
}
},
init() {
this.timmer = setTimeout(() => {
window.location.href = '/index.html'
}, 1000 * this.countdown);
},
}
}
以上是编程学习网小编为您介绍的“vue监听当前页面是否处于操作状态,待机无操作状态返回指定页面”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vue监听当前页面是否处于操作状态,待机无操作状态返回指定页面
基础教程推荐
猜你喜欢
- 防止网页被搜索引擎爬虫和网页采集器收录的方法汇总 2024-01-16
- 基于HTML5的可预览多图片Ajax上传 2023-01-20
- ion content 滚动到底部会遮住一部分视图的快速解决方法 2024-03-08
- 从基础开始建立一个JS代码库第1/2页 2024-02-07
- 如何制作浮动广告 JavaScript制作浮动广告代码 2024-01-07
- JavaScript实现cookie的写入、读取、删除功能 2024-01-12
- layui Table 设置title 字体加粗 2022-10-18
- 使用webapi绑定layui数据表格完整增删查改记录 2022-12-17
- 一步步教大家编写酷炫的导航栏js+css实现 2023-12-21
- 详解CSS故障艺术 2022-11-23
