VueUse中文文档useActiveElement
响应式 document.activeElement
Reactive document.activeElement
例子
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
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
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>