VueUseuseActiveElement
Reactive document.activeElement
Demo
Usage
js
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log('focus changed to', el)
})
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log('focus changed to', el)
})
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseActiveElement v-slot="{ element }">
Active element is {{ element.dataset.id }}
</UseActiveElement>
<UseActiveElement v-slot="{ element }">
Active element is {{ element.dataset.id }}
</UseActiveElement>
Type Declarations
typescript
export interface UseActiveElementOptions
extends ConfigurableWindow,
ConfigurableDocumentOrShadowRoot {}
/**
* Reactive `document.activeElement`
*
* @see https://vueuse.org/useActiveElement
* @param options
*/
export declare function useActiveElement<T extends HTMLElement>(
options?: UseActiveElementOptions
): ComputedRefWithControl<T | null | undefined>
export interface UseActiveElementOptions
extends ConfigurableWindow,
ConfigurableDocumentOrShadowRoot {}
/**
* Reactive `document.activeElement`
*
* @see https://vueuse.org/useActiveElement
* @param options
*/
export declare function useActiveElement<T extends HTMLElement>(
options?: UseActiveElementOptions
): ComputedRefWithControl<T | null | undefined>
Source
Contributors
Anthony Fu
Dominik Pschenitschni
vaakian X
James Garbutt
vaakian X
wheat
Alex Kozack