useWindowFocus

分类

元素

导出大小

681 B

上次更改

3 个月前

使用 window.onfocus 和 window.onblur 事件响应式地跟踪窗口焦点。

演示

源文件在线演练 (beta)

💡 点击文档外部的某个位置以失去焦点。

用法

vue

<script setup lang="ts">
import { useWindowFocus
 } from '@vueuse/core'

const focused
 = useWindowFocus
()
</script>

<template>
  <div
>{{ focused
 }}</div
>
</template>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

<template>
  <UseWindowFocus v-slot="{ focused
 }">
    Document Focus: {{ focused
 }}
  </UseWindowFocus>
</template>

类型声明

/**
 * Reactively track window focus with `window.onfocus` and `window.onblur`.
 *
 * @see https://vueuse.org.cn/useWindowFocus
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useWindowFocus
(
  options
?: ConfigurableWindow
,
): ShallowRef
<boolean>