跳到主要内容

useActiveElement

分类
导出大小
1.19 kB
上次更改
2 个月前

响应式的 document.activeElement

演示

选择下面的输入框查看变化
当前活动元素: null

用法

vue
<script setup lang="ts">
import { 
useActiveElement
} from '@vueuse/core'
import {
watch
} from 'vue'
const
activeElement
=
useActiveElement
()
watch
(
activeElement
, (
el
) => {
console
.
log
('focus changed to',
el
)
}) </script>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法

vue
<template>
  <UseActiveElement v-slot="{ 
element
}">
Active element is {{
element
?.dataset.id }}
</UseActiveElement> </template>

类型声明

ts
export interface UseActiveElementOptions
  extends ConfigurableWindow,
    ConfigurableDocumentOrShadowRoot {
  /**
   * Search active element deeply inside 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.cn/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)!: 重构组件并使其保持一致 (#4912)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.3.0
08cf5 - feat(onElementRemoval): 新增函数,重构 useActiveElement useElementHover (#4410)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
f3515 - feat: 添加 triggerOnRemoval 选项 (#3958)
v10.9.0
b1426 - fix(useActiveElement/useFocusWithin): 将 computedWithControl 替换为局部跟踪的 ref (#3815)
v10.3.0
296dc - feat: 深入搜索 shadow dom (#3208)

根据 MIT 许可证发布。