Skip to content

useFocusWithin

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

¥Reactive utility to track if an element or one of its decendants has focus. It is meant to match the behavior of the :focus-within CSS pseudo-class. A common use case would be on a form element to see if any of its inputs currently have focus.

示例

Focus in form: false

基本用法

¥Basic Usage

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>