Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

packages/effects/hooks/src/use-hover-toggle.ts

@@ -1,9 +1,12 @@
 import type { Arrayable, MaybeElementRef } from '@vueuse/core';
+
 import type { Ref } from 'vue';
 
+import { computed, onUnmounted, ref, unref, watch } from 'vue';
+
 import { isFunction } from '@vben/utils';
-import { useMouseInElement } from '@vueuse/core';
-import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { useElementHover } from '@vueuse/core';
 
 /**
  * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
@@ -15,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);