|
|
|
@ -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); |
|
|
|
|