useFocusWithin

类别

Sensors

导出体积

1.37 kB

上次更改

7 months ago

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

示例

源码 playground (beta)

Focus in form: 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
('目标包含有焦点的元素')
  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>

类型声明

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