useFocusWithin

监听当前焦点是否在某个区域之内，同 css 属性 :focus-within。

代码演示

基础用法

First Name:
Last Name:

isFocusWithin: false

-

点击查看代码

<script setup>
import { useFocusWithin } from "ahooks-for-vue";
import { ref } from "vue";

const domRef = ref(null);
const { isFocusWithin, stop, restart } = useFocusWithin(domRef);
</script>
<template>
  <div>
    <div
      ref="domRef"
      :style="{
        padding: '32px',
        backgroundColor: isFocusWithin ? 'red' : '',
        border: '1px solid gray',
        userSelect: 'none',
      }"
    >
      <label :style="{ display: 'block' }"> First Name: <input /> </label><br />
      <label :style="{ display: 'block', marginTop: 16 }">
        Last Name: <input />
      </label>
    </div>
    <p>isFocusWithin: {{ isFocusWithin }}</p>
    <button @click="restart">重新开始监听</button>
    -
    <button @click="stop">移除监听</button>
  </div>
</template>
<style></style>

传入 DOM 元素

API

const isFocusWithin = useFocusWithin(target, {
  onFocus,
  onBlur,
  onChange,
});

Params

参数	说明	类型	默认值
target	DOM 节点或者 Ref 对象	() => Element | Element | Ref<Element>	-
options	额外的配置项	Options	-

Options

参数	说明	类型	默认值
onFocus	获取焦点时触发	(e: FocusEvent) => void	-
onBlur	失去焦点时触发	(e: FocusEvent) => void	-
onChange	焦点变化时触发	(isFocusWithin: boolean) => void	-

Result 相比ahooks新增的APi

参数	说明	类型
isFocusWithin	焦点是否在当前区域	Ref<boolean>
restart	重新开始监听函数	() => void
stop	移除监听函数	() => void