VueUse中文文档useIdle
跟踪用户是否处于非活动状态。
Tracks whether the user is being inactive.
例子
Usage
js
import { useIdle } from '@vueuse/core'
const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min
console.log(idle.value) // true or false
import { useIdle } from '@vueuse/core'
const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min
console.log(idle.value) // true or false
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseIdle v-slot="{ idle }" :timeout="5 * 60 * 1000">
Is Idle: {{ idle }}
</UseIdle>
<UseIdle v-slot="{ idle }" :timeout="5 * 60 * 1000">
Is Idle: {{ idle }}
</UseIdle>
Type Declarations
typescript
export interface UseIdleOptions
extends ConfigurableWindow,
ConfigurableEventFilter {
/**
* Event names that listen to for detected user activity
*
* @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
*/
events?: WindowEventName[]
/**
* Listen for document visibility change
*
* @default true
*/
listenForVisibilityChange?: boolean
/**
* Initial state of the ref idle
*
* @default false
*/
initialState?: boolean
}
export interface UseIdleReturn {
idle: Ref<boolean>
lastActive: Ref<number>
}
/**
* Tracks whether the user is being inactive.
*
* @see https://vueuse.org/useIdle
* @param timeout default to 1 minute
* @param options IdleOptions
*/
export declare function useIdle(
timeout?: number,
options?: UseIdleOptions
): UseIdleReturn
export interface UseIdleOptions
extends ConfigurableWindow,
ConfigurableEventFilter {
/**
* Event names that listen to for detected user activity
*
* @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
*/
events?: WindowEventName[]
/**
* Listen for document visibility change
*
* @default true
*/
listenForVisibilityChange?: boolean
/**
* Initial state of the ref idle
*
* @default false
*/
initialState?: boolean
}
export interface UseIdleReturn {
idle: Ref<boolean>
lastActive: Ref<number>
}
/**
* Tracks whether the user is being inactive.
*
* @see https://vueuse.org/useIdle
* @param timeout default to 1 minute
* @param options IdleOptions
*/
export declare function useIdle(
timeout?: number,
options?: UseIdleOptions
): UseIdleReturn