diff --git a/src/components/GlobalMask/index.vue b/src/components/GlobalMask/index.vue index 9948332d..f250061d 100644 --- a/src/components/GlobalMask/index.vue +++ b/src/components/GlobalMask/index.vue @@ -14,23 +14,28 @@ const { t } = useI18n(); /**显示遮罩 */ const isVisible = computed(() => !['none', 'lock'].includes(maskStore.type)); -// 等待指定的时间后触发事件的函数 +// 用户无操作一段时间后进行锁屏 function idleTimeout(time: number, callback: Function) { if (time === 0) return; let timeoutId: any; - - function resetTimer() { - clearTimeout(timeoutId); - timeoutId = setTimeout(callback, time); + let idleTime = 0; + function resetIdleTime() { + idleTime = 0; } - - // 监听浏览器标签是否活动 - window.addEventListener('blur', useThrottleFn(resetTimer, 300)); - window.addEventListener('focus', useThrottleFn(resetTimer, 300)); - document.addEventListener('visibilitychange', useThrottleFn(resetTimer, 300)); - - // 初始化定时器 - resetTimer(); + // 监听用户活动事件 + document.addEventListener('mousemove', useThrottleFn(resetIdleTime, 1000)); + document.addEventListener('keydown', useThrottleFn(resetIdleTime, 1000)); + document.addEventListener('click', useThrottleFn(resetIdleTime, 1000)); + // 定时检查用户是否长时间无操作 + timeoutId = setInterval(() => { + idleTime += 1000; + console.log('idleTime', idleTime, idleTime >= time); + if (idleTime >= time) { + clearTimeout(timeoutId); + // 达到设定的无操作时间,执行锁屏操作 + callback(); + } + }, 1000); } /**组件实例挂载之后调用 */