Skip to content

useActiveElement

类别
导出体积
1.19 kB
上次更改
last week

响应式地获取 document.activeElement

示例

选择下面的 input 查看当前激活的元素
当前激活的元素: null

用法

vue
<script setup lang="ts">
import { 
useActiveElement
} from '@vueuse/core'
import {
watch
} from 'vue'
const
activeElement
=
useActiveElement
()
watch
(
activeElement
, (
el
) => {
console
.
log
('当前活动元素是',
el
)
}) </script>

组件用法

vue
<template>
  <UseActiveElement v-slot="{ 
element
}">
当前活动元素是 {{
element
?.dataset.id }}
</UseActiveElement> </template>

类型声明

ts
export interface UseActiveElementOptions
  extends ConfigurableWindow,
    ConfigurableDocumentOrShadowRoot {
  /**
   * 在 shadow dom 中深度搜索活动元素
   *
   * @default true
   */
  
deep
?: boolean
/** * Track active element when it's removed from the DOM * Using a MutationObserver under the hood * @default false */
triggerOnRemoval
?: boolean
} /** * Reactive `document.activeElement` * * @see https://vueuse.org/useActiveElement * @param options * * @__NO_SIDE_EFFECTS__ */ export declare function
useActiveElement
<
T
extends HTMLElement>(
options
?: UseActiveElementOptions,
):
ShallowRef
<
T
| null | undefined,
T
| null | undefined>
export type
UseActiveElementReturn
=
ReturnType
<typeof
useActiveElement
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Anthony Fu
Dominik Pschenitschni
IlyaL
SerKo
青椒肉丝
IlyaL
Fernando Fernández
Ben Lau
Alex
Jake Tigchelaar
duoduoObama
vaakian X
James Garbutt
vaakian X
wheat
Alex Kozack

更新日志

8c521 - feat(components)!: refactor components and make them consistent (#4912)
d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
dd316 - feat: use passive event handlers everywhere is possible (#4477)
08cf5 - feat(onElementRemoval): new function, refactor useActiveElement useElementHover (#4410)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
f3515 - feat: add triggerOnRemoval option (#3958)
b1426 - fix(useActiveElement/useFocusWithin): replace computedWithControl with locally tracked ref (#3815)
296dc - feat: search deeply in shadow dom (#3208)