VueUse中文文档useFocus
响应式跟踪或设置 DOM 元素的焦点状态。状态变化以反映目标元素是否是焦点元素，从外部设置响应值为 true 和 false，将分别触发 focus 和 blur 事件。
Reactive utility to track or set the focus state of a DOM element. State changes to reflect whether the target element is the focused element. Setting reactive value from the outside will trigger focus and blur events for true and false values respectively.
例子
可聚焦的文本
Basic Usage
import { useFocus } from '@vueuse/core'
const target = ref()
const { focused } = useFocus(target)
watch(focused, (focused) => {
if (focused)
console.log('input element has been focused')
else console.log('input element has lost focus')
})
import { useFocus } from '@vueuse/core'
const target = ref()
const { focused } = useFocus(target)
watch(focused, (focused) => {
if (focused)
console.log('input element has been focused')
else console.log('input element has lost focus')
})
设定初始焦点(Setting initial focus)
为了让第一次渲染的元素聚焦，可以把initialValue 设为 true。这将触发目标元素上的 focus 事件。
To focus the element on its first render one can provide the initialValue option as true. This will trigger a focus event on the target element.
import { useFocus } from '@vueuse/core'
const target = ref()
const { focused } = useFocus(target, { initialValue: true })
import { useFocus } from '@vueuse/core'
const target = ref()
const { focused } = useFocus(target, { initialValue: true })
改变焦点状态(Change focus state)
focused 的响应式引用设置为true 和 false，将分别触发 focus 和 blur 事件。你可以利用这个行为作为聚焦目标元素的另一种方式。
Changes of the focused reactive ref will automatically trigger focus and blur events for true and false values respectively. You can utilize this behavior to focus the target element as a result of another action (e.g. when a button click as shown below).
<template>
<div>
<button type="button" @click="focused = true">点我聚焦下面的输入框</button>
<input ref="input" type="text">
</div>
</template>
<script>
import { ref } from 'vue'
import { useFocus } from '@vueuse/core'
export default {
setup() {
const input = ref()
const { focused } = useFocus(input)
return {
input,
focused,
}
}
}
</script>
<template>
<div>
<button type="button" @click="focused = true">点我聚焦下面的输入框</button>
<input ref="input" type="text">
</div>
</template>
<script>
import { ref } from 'vue'
import { useFocus } from '@vueuse/core'
export default {
setup() {
const input = ref()
const { focused } = useFocus(input)
return {
input,
focused,
}
}
}
</script>
Type Declarations
export interface UseFocusOptions extends ConfigurableWindow {
/**
* Initial value. If set true, then focus will be set on the target
*
* @default false
*/
initialValue?: boolean
}
export interface UseFocusReturn {
/**
* If read as true, then the element has focus. If read as false, then the element does not have focus
* If set to true, then the element will be focused. If set to false, the element will be blurred.
*/
focused: Ref<boolean>
}
/**
* Track or set the focus state of a DOM element.
*
* @see https://vueuse.org/useFocus
* @param target The target element for the focus and blur events.
* @param options
*/
export declare function useFocus(
target: MaybeElementRef,
options?: UseFocusOptions
): UseFocusReturn
export interface UseFocusOptions extends ConfigurableWindow {
/**
* Initial value. If set true, then focus will be set on the target
*
* @default false
*/
initialValue?: boolean
}
export interface UseFocusReturn {
/**
* If read as true, then the element has focus. If read as false, then the element does not have focus
* If set to true, then the element will be focused. If set to false, the element will be blurred.
*/
focused: Ref<boolean>
}
/**
* Track or set the focus state of a DOM element.
*
* @see https://vueuse.org/useFocus
* @param target The target element for the focus and blur events.
* @param options
*/
export declare function useFocus(
target: MaybeElementRef,
options?: UseFocusOptions
): UseFocusReturn