From 182f1c9da810b97d7a8bc463e036212dea982ccd Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Wed, 12 Feb 2025 17:59:59 +0800
Subject: [PATCH] fix: userDropdown triggered unnecessary while overlay shown
 (#5520)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 修复顶部的用户资料下拉在弹窗被打开时，仍然可以被触发的问题
---
 packages/effects/hooks/src/use-hover-toggle.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/effects/hooks/src/use-hover-toggle.ts b/packages/effects/hooks/src/use-hover-toggle.ts
index 0977178c..491b1f58 100644
--- a/packages/effects/hooks/src/use-hover-toggle.ts
+++ b/packages/effects/hooks/src/use-hover-toggle.ts
@@ -2,11 +2,11 @@ import type { Arrayable, MaybeElementRef } from '@vueuse/core';
 
 import type { Ref } from 'vue';
 
-import { computed, onUnmounted, ref, watch } from 'vue';
+import { computed, onUnmounted, ref, unref, watch } from 'vue';
 
 import { isFunction } from '@vben/utils';
 
-import { useMouseInElement } from '@vueuse/core';
+import { useElementHover } from '@vueuse/core';
 
 /**
  * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
@@ -18,15 +18,19 @@ export function useHoverToggle(
   refElement: Arrayable<MaybeElementRef>,
   delay: (() => number) | number = 500,
 ) {
-  const isOutsides: Array<Ref<boolean>> = [];
+  const isHovers: Array<Ref<boolean>> = [];
   const value = ref(false);
   const timer = ref<ReturnType<typeof setTimeout> | undefined>();
   const refs = Array.isArray(refElement) ? refElement : [refElement];
   refs.forEach((refEle) => {
-    const listener = useMouseInElement(refEle, { handleOutside: true });
-    isOutsides.push(listener.isOutside);
+    const eleRef = computed(() => {
+      const ele = unref(refEle);
+      return ele instanceof Element ? ele : (ele?.$el as Element);
+    });
+    const isHover = useElementHover(eleRef);
+    isHovers.push(isHover);
   });
-  const isOutsideAll = computed(() => isOutsides.every((v) => v.value));
+  const isOutsideAll = computed(() => isHovers.every((v) => !v.value));
 
   function setValueDelay(val: boolean) {
     timer.value && clearTimeout(timer.value);