useHover

useHover 鼠标是否正在悬停目标元素上

基础用法

<template>
  <div ref="hoverRef">{{ isHover ? "Hovered!" : "Hover over me!" }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const hoverRef = ref(null);

import { useHover } from "hooks-vue3";
const isHover = useHover(hoverRef, {
  delayEnter: 100,
  delayLeave: 100,
  onEnter() {
    console.log("ener");
  },
  onLeave() {
    console.log("leave");
  },
});

</script>

API

const isHover = useHover(hoverRef, {
  delayEnter: 100,
  delayLeave: 100,
  onEnter() {
    console.log("ener");
  },
  onLeave() {
    console.log("leave");
  },
});

参数

type UseHoverOptions = {
  delayEnter?: number;
  delayLeave?: number;
  onLeave?: () => void;
  onEnter?: () => void;
};

type Target<T> = T | (() => T) | Ref<T>;

function useHover(
  target: Target<Element | null>,
  options?: UseHoverOptions,
): Ref<boolean>