问题描述:在自助机上操作上会出现一个问题,就是用户操作到一半或者操作完成了就走了,没有返回到首页。
功能介绍: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-02-25
- vue3项目中使用tinymce的方法 2023-12-24
- Vue中的Xss构造 2023-10-08
- 原生js自定义右键菜单 2024-02-06
- JS模拟并美化的表单控件完整实例 2024-03-11
- clear 万能清除浮动(clearfix:after) 2024-02-07
- 详解移动端实现内滚动的四种解决方案 2024-02-21
- react-redux的connect与React.forwardRef结合ref失效的解决 2023-07-09
- 原生JavaScript实现todolist功能 2024-02-12
- css中float:right右对齐元素会换行不在同一条线上 2024-02-06