Skip to content

useIdle

跟踪用户是否处于非活动状态。

¥Tracks whether the user is being inactive.

示例

For demonstration purpose, the idle timeout is set to 5s in this demo (default 1min).
Idle: false
Inactive: 0s

用法

¥Usage

ts
import { 
useIdle
} from '@vueuse/core'
const {
idle
,
lastActive
} =
useIdle
(5 * 60 * 1000) // 5 min
console
.
log
(
idle
.
value
) // true or false

以编程方式重置:

¥Programatically resetting:

ts
import { 
useCounter
,
useIdle
} from '@vueuse/core'
import {
watch
} from 'vue'
const {
inc
,
count
} =
useCounter
()
const {
idle
,
lastActive
,
reset
} =
useIdle
(5 * 60 * 1000) // 5 min
watch
(
idle
, (
idleValue
) => {
if (
idleValue
) {
inc
()
console
.
log
(`Triggered ${
count
.
value
} times`)
reset
() // restarts the idle timer. Does not change lastActive value
} })

组件用法

¥Component Usage

vue
<template>
  <UseIdle v-slot="{ 
idle
}"
:timeout
="5 * 60 * 1000">
Is Idle: {{
idle
}}
</UseIdle> </template>