useFocusWithin

分类

传感器

导出大小

1.37 kB

上次更改

8 个月前

响应式工具，用于跟踪元素或其任何子元素是否获得焦点。它旨在匹配 :focus-within CSS 伪类的行为。一个常见的用例是在表单元素上，查看其任何输入框当前是否获得焦点。

演示

源代码演练场 (beta)

表单内部焦点：false

基本用法

vue

<script setup lang="ts">
import { useFocusWithin
 } from '@vueuse/core'
import { ref
, watch
 } from 'vue'

const target
 = ref
()
const { focused
 } = useFocusWithin
(target
)

watch
(focused
, (focused
) => {
  if (focused
)
    console
.log
('Target contains the focused element')
  else
    console
.log
('Target does NOT contain the focused element')
})
</script>

<template>
  <form
 ref
="target
">
    <input
 type
="text" placeholder
="First Name">
    <input
 type
="text" placeholder
="Last Name">
    <input
 type
="text" placeholder
="Email">
    <input
 type
="text" placeholder
="Password">
  </form
>
</template>

类型声明

export interface UseFocusWithinReturn {
  /**
   * True if the element or any of its descendants are focused
   */
  focused
: ComputedRef
<boolean>
}
/**
 * Track if focus is contained within the target element
 *
 * @see https://vueuse.org.cn/useFocusWithin
 * @param target The target element to track
 * @param options Focus within options
 */
export declare function useFocusWithin
(
  target
: MaybeElementRef
,
  options
?: ConfigurableWindow
,
): UseFocusWithinReturn