Skip to content

useElementHover

反应式元素的悬停状态。

¥Reactive element's hover state.

示例

用法

¥Usage

vue
<script setup lang="ts">
import { 
useElementHover
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const
myHoverableElement
=
useTemplateRef
<HTMLButtonElement>('myHoverableElement')
const
isHovered
=
useElementHover
(
myHoverableElement
)
</script> <template> <
button
ref
="
myHoverableElement
">
{{
isHovered
}}
</
button
>
</template>

指令用法

¥Directive Usage

vue
<script setup lang="ts">
import { 
vElementHover
} from '@vueuse/components'
import {
shallowRef
} from 'vue'
const
isHovered
=
shallowRef
(false)
function
onHover
(
state
: boolean) {
isHovered
.
value
=
state
} </script> <template> <
button
v-element-hov
er="
onHover
">
{{
isHovered
? 'Thank you!' : 'Hover me' }}
</
button
>
</template>

你还可以提供悬停选项:

¥You can also provide hover options:

vue
<script setup lang="ts">
import { 
vElementHover
} from '@vueuse/components'
import {
shallowRef
} from 'vue'
const
isHovered
=
shallowRef
(false)
function
onHover
(
hovered
: boolean) {
isHovered
.
value
=
hovered
} </script> <template> <
button
v-element-hov
er="
[
onHover
, {
delayEnter
: 1000 }]
">
<
span
>{{
isHovered
? 'Thank you!' : 'Hover me' }}</
span
>
</
button
>
</template>