useFocusWithin

类别

Sensors

导出体积

1.13 kB

上次更改

3 days ago

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

示例

源码

Focus in form: false

基本用法

vue

<script>
import { ref, watch } from 'vue'
import { useFocusWithin } from '@vueuse/core'

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

watch(focused, (focused) => {
  if (focused)
    console.log('目标包含有焦点的元素')
  else console.log('目标不包含有焦点的元素')
})
</script>

<template>
  <form ref="target">
    <input type="text" placeholder="名">
    <input type="text" placeholder="姓">
    <input type="text" placeholder="电子邮件">
    <input type="text" placeholder="密码">
  </form>
</template>

类型声明

typescript

export interface UseFocusWithinReturn {
  /**
   * 如果该元素或其任何子元素获得焦点，则为 true
   */
  focused: ComputedRef<boolean>
}
/**
 * 跟踪焦点是否包含在目标元素内
 *
 * @see https://vueuse.org/useFocusWithin
 * @param target The target element to track
 * @param options Focus within options
 */
export declare function useFocusWithin(
  target: MaybeElementRef,
  options?: ConfigurableWindow,
): UseFocusWithinReturn