useElementHover

分类

传感器

导出大小

1.17 kB

上次更改

4 个月前

响应式地获取元素的悬停状态。

演示

源代码在线演示 (beta)

用法

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>

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法。

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>

你也可以提供悬停选项

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>

类型声明

export interface UseElementHoverOptions extends ConfigurableWindow {
  delayEnter
?: number
  delayLeave
?: number
  triggerOnRemoval
?: boolean
}
export declare function useElementHover
(
  el
: MaybeRefOrGetter
<EventTarget | null | undefined>,
  options
?: UseElementHoverOptions,
): ShallowRef
<boolean>