fix: 用户无操作一段时间后进行锁屏

This commit is contained in:
TsMask
2024-06-27 20:45:26 +08:00
parent e31c85835d
commit 95931b2b6e

View File

@@ -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);
}
/**组件实例挂载之后调用 */